<template>
  <div>
    <Table-easy ref="tab2" :table-data="tableData" :is-pagination-show="false"
      index-type="index" @cell-dblclick="handleTableRow">
      <template slot="TableHead">
        <el-row>
          <el-col :span="20">
            <el-form ref="ruleForm" :model="searchInfo" :inline="true">
              <!-- <el-form-item label="日期:" prop="day_search">
                <el-date-picker v-model="searchInfo.day_search" value-format="yyyy-MM-dd" type="date" @change="test()"
                  placeholder="请选定日期" />
              </el-form-item>
              <el-form-item label="连轧出口卷号:" prop="entid">
                <el-input v-model.trim="searchInfo.entid" @keyup.enter.native="test()" onkeyup="this.value=this.value.replace(/[^\w]/g,'')" @change="test()"
                  clearable />
              </el-form-item> -->
              <el-form-item label="多卷查询:" style="height: 15px;">
                <el-input v-model="searchInfo.entids" type="textarea" style="z-index: 999;" placeholder="输入卷号按回车键换行" @input="handleInput"/>
              </el-form-item>
              <el-form-item label="开始时间:" prop="dbegin">
                <el-date-picker v-model="searchInfo.dbegin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                  placeholder="开始时间" />
              </el-form-item>
              <el-form-item label="结束时间:" prop="dend">
                <el-date-picker v-model="searchInfo.dend" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                  placeholder="结束时间" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4">
            <div class="btn">
              <el-button size="mini" type="primary" @click="test()">查询</el-button>
              <el-button size="mini" type="primary" @click="resetForm('ruleForm')">重置</el-button>
              <el-button size="mini" type="primary" @click="exportToExcel()">导出</el-button>
            </div>
          </el-col>
        </el-row>
      </template>
      <template slot="TableBody">
        <el-table-column prop="PRODUCTID" label="连轧出口卷号" width="130" sortable/>
        <el-table-column prop="GRADE" label="钢种" width="150" sortable/>
        <!-- <el-table-column prop="ENWIDTH" label="入口宽度" width="110" sortable/>
        <el-table-column prop="ENTHICK" label="入口厚度" width="110" sortable/> -->
        <!-- <el-table-column
          prop="ENLENGTH"
          label="入口长度"
          width="80"/> -->
        <!-- <el-table-column prop="REDUCTRATE" label="压下量" width="90" sortable/> -->
        <el-table-column prop="EXWIDTH" label="宽度" width="74" sortable />
        <el-table-column prop="EXTHICK" label="厚度" width="74" sortable/>
        <el-table-column prop="EXLENGTH" label="长度" width="74" sortable/>
        <!-- <el-table-column prop="F5SPEED" label="S5速度" width="92" sortable/> -->
        <el-table-column  width="52"
              label="头">
              <template slot-scope="scope">
                <el-tooltip
                  :content="scope.row.HEAD_JIFEN + ''"
                  class="item"
                  effect="dark"
                  placement="top-start">
                  <div
                    v-if="scope.row.HEAD_JIFEN <= 1.5"
                    :class="Flatness(scope)">A</div>
                  <div
                    v-if="scope.row.HEAD_JIFEN > 1.5 && scope.row.HEAD_JIFEN < 3"
                    :class="Flatness(scope)">B</div>
                  <div
                    v-if="scope.row.HEAD_JIFEN >= 3 && scope.row.HEAD_JIFEN < 5"
                    :class="Flatness(scope)">C</div>
                  <div
                    v-if="scope.row.HEAD_JIFEN > 5"
                    :class="Flatness(scope)">D</div>
                </el-tooltip>
              </template>
        </el-table-column>
        <el-table-column  width="52"
              label="中">
              <template slot-scope="scope">
                <el-tooltip
                  :content="scope.row.MID_JIFEN + ''"
                  class="item"
                  effect="dark"
                  placement="top-start">
                  <div
                    v-if="scope.row.MID_JIFEN <= 1"
                    :class="Flatness_1(scope)">A</div>
                  <div
                    v-if="scope.row.MID_JIFEN > 1 && scope.row.MID_JIFEN < 2"
                    :class="Flatness_1(scope)">B</div>
                  <div
                    v-if="scope.row.MID_JIFEN >= 2 && scope.row.MID_JIFEN < 4"
                    :class="Flatness_1(scope)">C</div>
                  <div
                    v-if="scope.row.MID_JIFEN > 4"
                    :class="Flatness_1(scope)">D</div>
                </el-tooltip>
              </template>
        </el-table-column>
        <el-table-column  width="52"
              label="尾">
              <template slot-scope="scope">
                <el-tooltip
                  :content="scope.row.TAIL_JIFEN + ''"
                  class="item"
                  effect="dark"
                  placement="top-start">
                  <div
                    v-if="scope.row.TAIL_JIFEN <= 1.5"
                    :class="Flatness_2(scope)">A</div>
                  <div
                    v-if="scope.row.TAIL_JIFEN > 1.5 && scope.row.TAIL_JIFEN < 3"
                    :class="Flatness_2(scope)">B</div>
                  <div
                    v-if="scope.row.TAIL_JIFEN >= 3 && scope.row.TAIL_JIFEN < 5"
                    :class="Flatness_2(scope)">C</div>
                  <div
                    v-if="scope.row.TAIL_JIFEN > 5"
                    :class="Flatness_2(scope)">D</div>
                </el-tooltip>
              </template>
        </el-table-column>

        <!-- <el-table-column v-if="rule"  prop="DEVICE_LENGTH_JIFEN_MAX" label="单侧浪" width="75" >
          <template slot-scope="scope">
                <el-tooltip
                  :content="scope.row.DEVICE_LENGTH_JIFEN_MAX + ''"
                  class="item"
                  effect="dark"
                  placement="top-start">
                  <div
                    v-if="scope.row.DEVICE_LENGTH_JIFEN_MAX <= 1"
                    :class="Device_risk(scope)">A</div>
                  <div
                    v-if="scope.row.DEVICE_LENGTH_JIFEN_MAX > 1 && scope.row.DEVICE_LENGTH_JIFEN_MAX < 2"
                    :class="Device_risk(scope)">B</div>
                  <div
                    v-if="scope.row.DEVICE_LENGTH_JIFEN_MAX >= 2 && scope.row.DEVICE_LENGTH_JIFEN_MAX < 4"
                    :class="Device_risk(scope)">C</div>
                  <div
                    v-if="scope.row.DEVICE_LENGTH_JIFEN_MAX > 4"
                    :class="Device_risk(scope)">D</div>
                </el-tooltip>
              </template>
        </el-table-column>
        <el-table-column v-if="rule" prop="DEVICE_LENGTH_JIFEN_MAX_POS" label="预警位置" width="95" /> -->

        <el-table-column
          width="215"
          prop="ASC_DESC"
          label="浪形描述">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              placement="top">
              <div
                slot="content"
                v-html="ToBreak(scope.row.ASC_DESC)"/>
              <div class="oneLine">{{ scope.row.ASC_DESC }}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column v-if="rule" prop="PAOPIAN_RATE" label="跑偏风险" width="102" :sort-method=" (a,b)=> {return a.PAOPIAN_RATE - b.PAOPIAN_RATE}" sortable>
          <template slot-scope="scope">
            <div :class="risk(scope.row.PAOPIAN_RATE)">{{ scope.row.PAOPIAN_RATE }}%</div>
          </template>
        </el-table-column>

        <el-table-column prop="PRODTIME_T" label="生产结束时间" width="155"  sortable/>
        <el-table-column label="操作" align="center" width="285px" >
          <template slot-scope="scope">
            <el-button size="mini" type="warning" v-if="rule" @click="handleTableRow_processdata(scope.row)">工艺参数</el-button>
            <el-button size="mini" type="warning" @click="handleTableRow(scope.row)">2D板形</el-button>
            <el-button size="mini" type="warning" @click="handleTableRow_3d(scope.row)">3D板形</el-button>
            <!-- <el-button size="mini" type="warning" v-if="rule" @click="handleTableRow_pinjie(scope.row)">拼接</el-button> -->
          </template>
        </el-table-column>
<!--
        <el-table-column prop="FLAT_BIGGERTHANMAX_LENGTH" label="超幅值长度" width="95" />
        <el-table-column prop="FLAT_BIGGERTHANMAX_RATE" label="超幅值占比" width="95" >
          <template slot-scope="scope">
            <div :class="banxing_risk(scope.row.FLAT_BIGGERTHANMAX_RATE)">{{ scope.row.FLAT_BIGGERTHANMAX_RATE }}%</div>
          </template>
        </el-table-column>
        <el-table-column prop="FLAT_RIBBED_AVG_OPPOSITE_SIGN" label="两侧反向长度" width="110" />
        <el-table-column prop="OPPOSITE_SIGN_RATE" label="两侧反向占比" width="110" >
          <template slot-scope="scope">
            <div :class="banxing_risk(scope.row.OPPOSITE_SIGN_RATE)">{{ scope.row.OPPOSITE_SIGN_RATE }}%</div>
          </template>
        </el-table-column>
        <el-table-column prop="FLAT_RIBBED_DIFFER_10" label="两侧超差长度" width="110" />
        <el-table-column prop="DIFFER_10_RATE" label="两侧超差占比" width="110" >
          <template slot-scope="scope">
            <div :class="banxing_risk(scope.row.DIFFER_10_RATE)">{{ scope.row.DIFFER_10_RATE }}%</div>
          </template>
        </el-table-column> -->


        <!-- <el-table-column prop="MAX_F1TENDIFF" label="出口张力差" align="center" width="92">
          <template slot-scope="scope">
            <div :class="MAX_F1TENDIFF_risk(scope.row.MAX_F1TENDIFF)">{{ scope.row.MAX_F1TENDIFF }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="MAX_F5GLEVEL_C" label="调平波动量" align="center" width="92">
          <template slot-scope="scope">
            <div :class="MAX_F5GLEVEL_C_risk(scope.row.MAX_F5GLEVEL_C)">{{ scope.row.MAX_F5GLEVEL_C }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="THICK_RATE" label="厚度命中率" align="center" width="92">
          <template slot-scope="scope">
            <div :class="ming(scope.row.THICK_RATE)">{{ scope.row.THICK_RATE }}</div>
          </template>
        </el-table-column> -->

        <el-table-column prop="CLASS_RATE1" label="等级1" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE1 - b.CLASS_RATE1}"  sortable>
          <template slot-scope="scope">
            <div :class="ming(scope.row.CLASS_RATE1)">{{ scope.row.CLASS_RATE1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="CLASS_RATE2" label="等级2" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE2 - b.CLASS_RATE2}"  sortable/>
        <el-table-column prop="CLASS_RATE3" label="等级3" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE3 - b.CLASS_RATE3}"  sortable/>
        <el-table-column prop="CLASS_RATE4" label="等级4" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE4 - b.CLASS_RATE4}"  sortable/>
        <el-table-column prop="CLASS_RATE5" label="等级5" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE5 - b.CLASS_RATE5}"  sortable/>
        <el-table-column prop="CLASS_RATE6" label="等级6" width="82" :sort-method=" (a,b)=> {return a.CLASS_RATE6 - b.CLASS_RATE6}"  sortable/>
        <el-table-column prop="CLASS_RATE7" label="等级7" width="82" />
      </template>
    </Table-easy>
    <!-- 弹窗 -->
    <el-dialog v-if="diglogShow" :modal-append-to-body="false" :visible.sync="newDialogFormVisible" top="1vh" width="80%"
      class="layout-dialog" append-to-body @close="close">
      <div id="data-view">
        <div class="layout-search">
          <div class="layout-search">
            <div class="dv-border-box-11">
              <div class="dv-border-box-11">
                <el-table :data="tableDataDialog" height="120px" border style="width: 98%;margin: 1%;">
                  <el-table-column prop="PRODUCTID" label="酸轧出口卷号" width="110" />
                  <el-table-column prop="GRADE" label="钢种" width="150" />
                  <el-table-column prop="ENWIDTH" label="入口宽度" width="80" />
                  <el-table-column prop="ENTHICK" label="入口厚度" width="80" />
                  <el-table-column prop="REDUCTRATE" label="压下量" width="65" />
                  <el-table-column prop="EXWIDTH" label="出口宽度" width="80" />
                  <el-table-column prop="EXTHICK" label="出口厚度" width="80" />
                  <el-table-column prop="EXLENGTH" label="出口长度" width="80" />
                  <el-table-column prop="F5SPEED" label="S5最大速度" width="100" />
                  <el-table-column prop="PRODTIME_T" label="时间" width="160" />
                  <el-table-column prop="CLASS_RATE1" label="等级1"  />
                  <el-table-column prop="CLASS_RATE2" label="等级2"  />
                  <el-table-column prop="CLASS_RATE3" label="等级3"  />
                  <el-table-column prop="CLASS_RATE4" label="等级4"  />
                  <el-table-column prop="CLASS_RATE5" label="等级5"  />
                  <el-table-column prop="CLASS_RATE6" label="等级6"  />
                  <el-table-column prop="CLASS_RATE7" label="等级7"  />
                </el-table>
              </div>
              <!-- 下面 -->
              <div style="width:99%">
                <el-row>
                  <el-col :span="4" >
                            <el-tree
                              ref="tree"
                              :data="treedata"
                              show-checkbox
                              node-key="id"
                              @check="handleNodeClick"
                            />
                  </el-col>
                  <el-col :span="20">
                    <div class="tuduxiexing dv-border-box-10">
                          <div id="app0" style="width:100%;height:560px;" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 2D弹窗 -->
    <el-dialog v-if="diglogShow2d" :modal-append-to-body="false" :visible.sync="newDialogFormVisible2d" top="1vh" width="90%"
      class="layout-dialog" append-to-body @close="close2d">
      <p class="public_box_title">
        2D板形详情
      </p>
      <div id="data-view">
        <div class="layout-search">
          <div class="layout-search">
            <div class="dv-border-box-11">
                <el-table :data="tableDataDialog" height="120px" border style="width: 98%;margin: 1%;">
                  <el-table-column prop="PRODUCTID" label="酸轧出口卷号" width="110" />
                  <el-table-column prop="GRADE" label="钢种" width="150" />
                  <el-table-column prop="ENWIDTH" label="入口宽度" width="80" />
                  <el-table-column prop="ENTHICK" label="入口厚度" width="80" />
                  <el-table-column prop="REDUCTRATE" label="压下量" width="65" />
                  <el-table-column prop="EXWIDTH" label="出口宽度" width="80" />
                  <el-table-column prop="EXTHICK" label="出口厚度" width="80" />
                  <el-table-column prop="EXLENGTH" label="出口长度" width="80" />
                  <el-table-column prop="F5SPEED" label="S5最大速度" width="100" />
                  <el-table-column prop="PRODTIME_T" label="时间" width="160" />
                  <el-table-column prop="CLASS_RATE1" label="等级1"  />
                  <el-table-column prop="CLASS_RATE2" label="等级2"  />
                  <el-table-column prop="CLASS_RATE3" label="等级3"  />
                  <el-table-column prop="CLASS_RATE4" label="等级4"  />
                  <el-table-column prop="CLASS_RATE5" label="等级5"  />
                  <el-table-column prop="CLASS_RATE6" label="等级6"  />
                  <el-table-column prop="CLASS_RATE7" label="等级7"  />
                </el-table>
                <!--曲线1 S5速度
                <div class=" dv-border-box-10">
                  <el-button size="mini" type="warning" @click="toogleCoilIn2D(coil_index+1)">前一卷</el-button>
                  <el-button size="mini" type="warning" @click="toogleCoilIn2D(coil_index-1)">后一卷</el-button>
                </div>-->
                <div class="checkbox-container" style="float: right;">
                  <div>
                    <input type="checkbox" id="headTailFlag" v-model="headTailFlag">
                    <label for="headTailFlag">是否头尾对调</label>
                    &nbsp;&nbsp;
                    <input type="checkbox" id="DSOSFlag" v-model="DSOSFlag">
                    <label for="DSOSFlag">是否两侧对调</label>
                  </div>
                </div>
                <!--2D-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_2d" style="width:100%;height:560px;" />
                </div>

                <!--曲线4 拟合分析结果-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_nihe" style="width:100%;height:300px;" />
                </div>
                <!--曲线6 肋浪均值差曲线-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_ribbed_wave" style="width:100%;height:300px;" />
                </div>
                <!--曲线5 板形均值曲线-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_flatave" style="width:100%;height:300px;" />
                </div>
                <!-- <div v-if="num == 1">{{ selected_s5_force_diff_text }}</div> -->
                <!--张力 出口厚度偏差-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_actual_tension" style="width:100%;height:300px;" />
                </div>
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_out_thickness_dev" style="width:100%;height:300px;" />
                </div>
                <!--曲线3 S5出口厚度-->
                <!-- <div  class="tuduxiexing dv-border-box-10">
                  <div id="app_s5_exthick" style="width:100%;height:300px;" />
                </div>
                <div >{{ selected_s5_exthick_diff_text }}</div> -->
                <!--曲线2 S5调平-->
                <!-- <div class="tuduxiexing dv-border-box-10">
                  <div id="app_s5_level" style="width:100%;height:300px;" />
                </div>
                <div >{{ selected_s5_level_diff_text }}</div> -->
              </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 3D弹窗 -->
    <el-dialog v-if="diglogShow3d" :modal-append-to-body="false" :visible.sync="newDialogFormVisible3d" top="1vh" width="90%"
      class="layout-dialog" append-to-body @close="close3d">
      <p class="public_box_title">
        3D板形详情
      </p>
      <div id="data-view">
        <div class="layout-search">
          <div class="layout-search">
            <div class="dv-border-box-11">
              <div class="dv-border-box-11">
                <el-table :data="tableDataDialog" height="120px" border style="width: 98%;margin: 1%;">
                  <el-table-column prop="PRODUCTID" label="酸轧出口卷号" width="110" />
                  <el-table-column prop="GRADE" label="钢种" width="150" />
                  <el-table-column prop="ENWIDTH" label="入口宽度" width="80" />
                  <el-table-column prop="ENTHICK" label="入口厚度" width="80" />
                  <el-table-column prop="REDUCTRATE" label="压下量" width="65" />
                  <el-table-column prop="EXWIDTH" label="出口宽度" width="80" />
                  <el-table-column prop="EXTHICK" label="出口厚度" width="80" />
                  <el-table-column prop="EXLENGTH" label="出口长度" width="80" />
                  <el-table-column prop="F5SPEED" label="S5最大速度" width="100" />
                  <el-table-column prop="PRODTIME_T" label="时间" width="160" />
                  <el-table-column prop="CLASS_RATE1" label="等级1"  />
                  <el-table-column prop="CLASS_RATE2" label="等级2"  />
                  <el-table-column prop="CLASS_RATE3" label="等级3"  />
                  <el-table-column prop="CLASS_RATE4" label="等级4"  />
                  <el-table-column prop="CLASS_RATE5" label="等级5"  />
                  <el-table-column prop="CLASS_RATE6" label="等级6"  />
                  <el-table-column prop="CLASS_RATE7" label="等级7"  />
                </el-table>
              </div>
                <!--3D-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app3d" style="width:100%;height:560px;" />
                  <!-- <nercar-echarts
                    :_height="'560px'"
                    :grid="echartsList[0].grid"
                    :legend="echartsList[0].legend"
                    :x-axis="echartsList[0].xAxis"
                    :y-axis="echartsList[0].yAxis"
                    :series="echartsList[0].series"
                    :tooltip="echartsList[0].tooltip"
                  /> -->
                </div>
              </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 拼接弹窗 -->
    <el-dialog v-if="diglogShow_pinjie" :modal-append-to-body="false" :visible.sync="newDialogFormVisible_pinjie" top="1vh" width="95%"
      class="layout-dialog" append-to-body @close="close_pinjie">
      <div id="data-view">
        <div class="layout-search">
          <div class="layout-search">
            <div class="dv-border-box-11">
                <el-table :data="tableDataDialog_pinjie" height="210px" border style="width: 98%;margin: 1%;">
                  <el-table-column prop="TITLE" label="顺序" align="center" width="68" />
                  <el-table-column prop="PRODUCTID" label="酸轧出口卷号" width="110" />
                  <el-table-column prop="GRADE" label="钢种" width="150" />
                  <el-table-column prop="ENWIDTH" label="入口宽度" width="80" />
                  <el-table-column prop="ENTHICK" label="入口厚度" width="80" />
                  <el-table-column prop="REDUCTRATE" label="压下量" width="65" />
                  <el-table-column prop="EXWIDTH" label="出口宽度" width="80" />
                  <el-table-column prop="EXTHICK" label="出口厚度" width="80" />
                  <el-table-column prop="EXLENGTH" label="出口长度" width="80" />
                  <el-table-column prop="F5SPEED" label="S5最大速度" width="100" />
                  <el-table-column prop="PRODTIME_T" label="时间" width="160" />
                  <el-table-column prop="CLASS_RATE1" label="等级1"  />
                  <el-table-column prop="CLASS_RATE2" label="等级2"  />
                  <el-table-column prop="CLASS_RATE3" label="等级3"  />
                  <el-table-column prop="CLASS_RATE4" label="等级4"  />
                  <el-table-column prop="CLASS_RATE5" label="等级5"  />
                  <el-table-column prop="CLASS_RATE6" label="等级6"  />
                  <el-table-column prop="CLASS_RATE7" label="等级7"  />
                </el-table>

                <!--拼接图-->
                <div class="tuduxiexing dv-border-box-10">
                  <div id="app_pinjie" style="width:100%;height:560px;" />
                </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 修改y轴弹框 -->
     <el-dialog
        :visible.sync="dialogVisible2"
        :title="dialogTitle"
        class="layout-dialog"
        width="15%">
        <div >
          <span style="color: #000;">上限</span>
          <el-input
            v-model="yMin"
            class="ipt"
            placeholder="请输入最大值"/>
        </div>
        <div >
          <span style="color: #000;">下限</span>
          <el-input
            v-model="yMax"
            class="ipt"
            placeholder="请输入最小值"/>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="no">取 消</el-button>
          <el-button @click="ok">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import http from "@/config/http.js";
import {  derivecloud } from '@/lib/Util'
import TableEasy from "@/components/TasilyTableEasy";
import Echarts from "echarts";
import moment from "moment";
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import echartsGL from "echarts-gl";
export default {
  components: {
    TableEasy},
  data() {
    return {
      searchInfo: {},
      condition: " ",
      findAllport: "1",
      // 数据加载标识
      value: "",
      tableData: [],
      num: 1,
      coil_index:'',
      timer: null,
      rule: false,
      loadingPort:false,
      diglogShow: false, //弹窗
      diglogShow2d: false, //弹窗
      diglogShow3d: false, //弹窗
      diglogShow_pinjie: false, //弹窗
      dialogTitle: '',
      newDialogFormVisible: false,
      newDialogFormVisible2d: false,
      newDialogFormVisible3d: false,
      newDialogFormVisible_pinjie: false,
      dialogVisible2: false,
      tableDataDialog: [],
      tableDataDialog_pinjie: [],
      selected_s5_level_diff_text: "",
      selected_s5_exthick_diff_text: "",
      selected_s5_force_diff_text: "",
      series_data_name: [],
      myChart_process_data_max1:null,
      myChart_process_data_min1:null,
      yMin:null,
      yMax:null,
      headTailFlag: true, //头尾对调flag
      DSOSFlag: false, //两侧对调flag
      treedata: [
        {
          id: 1,
          label: '轧制力',
          children: [
            {
              id: 'F1FORCE',
              label: 'F1轧制力'
            },
            {
              id: 'F2FORCE',
              label: 'F2轧制力'
            },
            {
              id: 'F3FORCE',
              label: 'F3轧制力'
            },
            {
              id: 'F4FORCE',
              label: 'F4轧制力'
            },
            {
              id: 'F5FORCE',
              label: 'F5轧制力'
            }
          ]
        },
        {
          id: 2,
          label: '入口张力',
          children: [
            {
              id: 'F1ENTENS',
              label: 'F1入口张力'
            },
            {
              id: 'F2ENTENS',
              label: 'F2入口张力'
            },
            {
              id: 'F3ENTENS',
              label: 'F3入口张力'
            },
            {
              id: 'F4ENTENS',
              label: 'F4入口张力'
            },
            {
              id: 'F5ENTENS',
              label: 'F5入口张力'
            }
          ]
        },
        {
          id: 3,
          label: '出口张力',
          children: [
            {
              id: 'F1EXTENS',
              label: 'F1出口张力'
            },
            {
              id: 'F2EXTENS',
              label: 'F2出口张力'
            },
            {
              id: 'F3EXTENS',
              label: 'F3出口张力'
            },
            {
              id: 'F4EXTENS',
              label: 'F4出口张力'
            },
            {
              id: 'F5EXTENS',
              label: 'F5出口张力'
            }
          ]
        },
        {
          id: 4,
          label: '速度',
          children: [
            {
              id: 'F1SPEED',
              label: 'F1速度'
            },
            {
              id: 'F2SPEED',
              label: 'F2速度'
            },
            {
              id: 'F3SPEED',
              label: 'F3速度'
            },
            {
              id: 'F4SPEED',
              label: 'F4速度'
            },
            {
              id: 'F5SPEED',
              label: 'F5速度'
            }
          ]
        },
        {
          id: 5,
          label: '压下率',
          children: [
            {
              id: 'F1REDRATE',
              label: 'F1压下率'
            },
            {
              id: 'F2REDRATE',
              label: 'F2压下率'
            },
            {
              id: 'F3REDRATE',
              label: 'F3压下率'
            },
            {
              id: 'F4REDRATE',
              label: 'F4压下率'
            },
            {
              id: 'F5REDRATE',
              label: 'F5压下率'
            }
          ]
        },
        {
          id: 6,
          label: '前滑',
          children: [
            {
              id: 'F1FSLIP',
              label: 'F1前滑'
            },
            {
              id: 'F2FSLIP',
              label: 'F2前滑'
            },
            {
              id: 'F3FSLIP',
              label: 'F3前滑'
            },
            {
              id: 'F4FSLIP',
              label: 'F4前滑'
            },
            {
              id: 'F5FSLIP',
              label: 'F5前滑'
            }
          ]
        },
        {
          id: 7,
          label: '出口厚度',
          children: [
            {
              id: 'F1EXTHICK',
              label: 'F1出口厚度'
            },
            {
              id: 'F2EXTHICK',
              label: 'F2出口厚度'
            },
            {
              id: 'F3EXTHICK',
              label: 'F3出口厚度'
            },
            {
              id: 'F4EXTHICK',
              label: 'F4出口厚度'
            },
            {
              id: 'F5EXTHICK',
              label: 'F5出口厚度'
            }
          ]
        },
        {
          id: 8,
          label: '传动侧轧制力',
          children: [
            {
              id: 'F1DSFORCES',
              label: 'F1传动侧轧制力'
            },
            {
              id: 'F2DSFORCES',
              label: 'F2传动侧轧制力'
            },
            {
              id: 'F3DSFORCES',
              label: 'F3传动侧轧制力'
            },
            {
              id: 'F4DSFORCES',
              label: 'F4传动侧轧制力'
            },
            {
              id: 'F5DSFORCES',
              label: 'F5传动侧轧制力'
            }
          ]
        },
        {
          id: 9,
          label: '操作侧轧制力',
          children: [
            {
              id: 'F1OSFORCES',
              label: 'F1操作侧轧制力'
            },
            {
              id: 'F2OSFORCES',
              label: 'F2操作侧轧制力'
            },
            {
              id: 'F3OSFORCES',
              label: 'F3操作侧轧制力'
            },
            {
              id: 'F4OSFORCES',
              label: 'F4操作侧轧制力'
            },
            {
              id: 'F5OSFORCES',
              label: 'F5操作侧轧制力'
            }
          ]
        },
        {
          id: 10,
          label: '传动侧辊缝差',
          children: [
            {
              id: 'F1DSGAP',
              label: 'F1传动侧辊缝差'
            },
            {
              id: 'F2DSGAP',
              label: 'F2传动侧辊缝差'
            },
            {
              id: 'F3DSGAP',
              label: 'F3传动侧辊缝差'
            },
            {
              id: 'F4DSGAP',
              label: 'F4传动侧辊缝差'
            },
            {
              id: 'F5DSGAP',
              label: 'F5传动侧辊缝差'
            }
          ]
        },
        {
          id: 11,
          label: '操作侧辊缝差',
          children: [
            {
              id: 'F1OSGAP',
              label: 'F1操作侧辊缝差'
            },
            {
              id: 'F2OSGAP',
              label: 'F2操作侧辊缝差'
            },
            {
              id: 'F3OSGAP',
              label: 'F3操作侧辊缝差'
            },
            {
              id: 'F4OSGAP',
              label: 'F4操作侧辊缝差'
            },
            {
              id: 'F5OSGAP',
              label: 'F5操作侧辊缝差'
            }
          ]
        },
        {
          id: 12,
          label: '调平',
          children: [
            {
              id: 'F1GLEVEL',
              label: 'F1调平'
            },
            {
              id: 'F2GLEVEL',
              label: 'F2调平'
            },
            {
              id: 'F3GLEVEL',
              label: 'F3调平'
            },
            {
              id: 'F4GLEVEL',
              label: 'F4调平'
            },
            {
              id: 'F5GLEVEL',
              label: 'F5调平'
            }
          ]
        },
        {
          id: 13,
          label: '工作辊弯辊',
          children: [
            {
              id: 'F1WRBEND',
              label: 'F1工作辊弯辊'
            },
            {
              id: 'F2WRBEND',
              label: 'F2工作辊弯辊'
            },
            {
              id: 'F3WRBEND',
              label: 'F3工作辊弯辊'
            },
            {
              id: 'F4WRBEND',
              label: 'F4工作辊弯辊'
            },
            {
              id: 'F5WRBEND',
              label: 'F5工作辊弯辊'
            }
          ]
        },
        {
          id: 14,
          label: '中间辊弯辊',
          children: [
            {
              id: 'F1IMRBEND',
              label: 'F1中间辊弯辊'
            },
            {
              id: 'F2IMRBEND',
              label: 'F2中间辊弯辊'
            },
            {
              id: 'F3IMRBEND',
              label: 'F3中间辊弯辊'
            },
            {
              id: 'F4IMRBEND',
              label: 'F4中间辊弯辊'
            },
            {
              id: 'F5IMRBEND',
              label: 'F5中间辊弯辊'
            }
          ]
        },
        {
          id: 15,
          label: '张力差',
          children: [
            {
              id: 'F1TENDIFF',
              label: 'F1张力差'
            },
            {
              id: 'F2TENDIFF',
              label: 'F2张力差'
            },
            {
              id: 'F3TENDIFF',
              label: 'F3张力差'
            },
            {
              id: 'F4TENDIFF',
              label: 'F4张力差'
            },
            {
              id: 'F5TENDIFF',
              label: 'F5张力差'
            },
            {
              id: 'F6TENDIFF',
              label: 'F6张力差'
            }
          ]
        },
        {
          id: 16,
          label: '剪刃',
          children: [
            {
              id: 'STRIMOSGAP',
              label: '操作侧剪刃间隙'
            },
            {
              id: 'STRIMDSGAP',
              label: '传动侧剪刃间隙'
            },
            {
              id: 'STRIMOSLAP',
              label: '操作侧剪刃重叠量'
            },
            {
              id: 'STRIMDSLAP',
              label: '传动侧剪刃重叠量'
            }
          ]
        },
        {
          id: 17,
          label: '其他',
          children: [
            {
              id: 'F1ENTHICK',
              label: 'F1入口厚度'
            },
            {
              id: 'F5RTYPE',
              label: 'F5轧辊类型'
            }
          ]
        }
      ],
      process_lists: [
        'F1FORCE', 'F1ENTENS', 'F1EXTENS', 'F1SPEED', 'F1REDRATE', 'F2FORCE',
        'F2ENTENS', 'F2EXTENS', 'F2SPEED', 'F2REDRATE', 'F3FORCE', 'F3ENTENS',
        'F3EXTENS', 'F3SPEED', 'F3REDRATE', 'F4FORCE', 'F4ENTENS', 'F4EXTENS',
        'F4SPEED', 'F4REDRATE', 'F5FORCE', 'F5ENTENS', 'F5EXTENS', 'F5SPEED',
        'F5REDRATE', 'F2DSFORCES', 'F1FSLIP', 'F2FSLIP', 'F3FSLIP', 'F4FSLIP',
        'F5FSLIP', 'F1EXTHICK', 'F2EXTHICK', 'F3EXTHICK', 'F4EXTHICK', 'F5EXTHICK',
        'F1DSFORCES', 'F1OSFORCES', 'F2OSFORCES', 'F3DSFORCES', 'F3OSFORCES', 'F4DSFORCES',
        'F4OSFORCES', 'F5DSFORCES', 'F5OSFORCES', 'F1DSGAP', 'F1OSGAP', 'F2DSGAP', 'F2OSGAP',
        'F3DSGAP', 'F3OSGAP', 'F4DSGAP', 'F4OSGAP', 'F5DSGAP', 'F5OSGAP', 'F1GLEVEL', 'F2GLEVEL',
        'F3GLEVEL', 'F4GLEVEL', 'F5GLEVEL', 'F1WRBEND', 'F2WRBEND', 'F3WRBEND', 'F4WRBEND', 'F1IMRBEND',
        'F2IMRBEND', 'F3IMRBEND', 'F4IMRBEND', 'F5IMRBEND', 'STRIMOSGAP', 'STRIMDSGAP', 'STRIMOSLAP',
        'STRIMDSLAP', 'F5WRBEND', 'F5RTYPE', 'F1ENTHICK', 'F6TENDIFF', 'F1TENDIFF', 'F2TENDIFF', 'F3TENDIFF', 'F4TENDIFF', 'F5TENDIFF'],
      series_data_line: [],
      process_lists_name: [
        'F1轧制力', 'F1入口张力', 'F1出口张力', 'F1速度', 'F1压下率',
        'F2轧制力', 'F2入口张力', 'F2出口张力', 'F2速度', 'F2压下率',
        'F3轧制力', 'F3入口张力', 'F3出口张力', 'F3速度', 'F3压下率',
        'F4轧制力', 'F4入口张力', 'F4出口张力', 'F4速度', 'F4压下率',
        'F5轧制力', 'F5入口张力', 'F5出口张力', 'F5速度', 'F5压下率',
        'F2传动侧轧制力', 'F1前滑', 'F2前滑', 'F3前滑', 'F4前滑', 'F5前滑',
        'F1出口厚度', 'F2出口厚度', 'F3出口厚度', 'F4出口厚度', 'F5出口厚度', 'F1传动侧轧制力', 'F1操作侧轧制力',
        'F2操作侧轧制力', 'F3传动侧轧制力', 'F3操作侧轧制力', 'F4传动侧轧制力', 'F4操作侧轧制力', 'F5传动侧轧制力',
        'F5操作侧轧制力', 'F1传动侧辊缝差', 'F1操作侧辊缝差', 'F2传动侧辊缝差', 'F2操作侧辊缝差', 'F3传动侧辊缝差',
        'F3操作侧辊缝差', 'F4传动侧辊缝差', 'F4操作侧辊缝差', 'F5传动侧辊缝差', 'F5操作侧辊缝差',
        'F1调平', 'F2调平', 'F3调平', 'F4调平', 'F5调平',
        'F1工作辊弯辊', 'F2工作辊弯辊', 'F3工作辊弯辊', 'F4工作辊弯辊',
        'F1中间辊弯辊', 'F2中间辊弯辊', 'F3中间辊弯辊', 'F4中间辊弯辊', 'F5中间辊弯辊',
        '操作侧剪刃间隙', '传动侧剪刃间隙', '操作侧剪刃重叠量', '传动侧剪刃重叠量', 'F5工作辊弯辊', 'F5轧辊类型',
        'F1入口厚度', 'F6张力差',
        'F1张力差', 'F2张力差', 'F3张力差', 'F4张力差', 'F5张力差'],
      process_date_line: {
        echartX1:[],
        F1FORCE:[],
        F1ENTENS:[],
        F1EXTENS:[],
        F1SPEED:[],
        F1REDRATE:[],
        F2FORCE:[],
        F2ENTENS:[],
        F2EXTENS:[],
        F2SPEED:[],
        F2REDRATE:[],
        F3FORCE:[],
        F3ENTENS:[],
        F3EXTENS:[],
        F3SPEED:[],
        F3REDRATE:[],
        F4FORCE:[],
        F4ENTENS:[],
        F4EXTENS:[],
        F4SPEED:[],
        F4REDRATE:[],
        F5FORCE:[],
        F5ENTENS:[],
        F5EXTENS:[],
        F5SPEED:[],
        F5REDRATE:[],
        F2DSFORCES:[],
        F1FSLIP:[],
        F2FSLIP:[],
        F3FSLIP:[],
        F4FSLIP:[],
        F5FSLIP:[],
        F1EXTHICK:[],
        F2EXTHICK:[],
        F3EXTHICK:[],
        F4EXTHICK:[],
        F5EXTHICK:[],
        F1DSFORCES:[],
        F1OSFORCES:[],
        F2OSFORCES:[],
        F3DSFORCES:[],
        F3OSFORCES:[],
        F4DSFORCES:[],
        F4OSFORCES:[],
        F5DSFORCES:[],
        F5OSFORCES:[],
        F1DSGAP:[],
        F1OSGAP:[],
        F2DSGAP:[],
        F2OSGAP:[],
        F3DSGAP:[],
        F3OSGAP:[],
        F4DSGAP:[],
        F4OSGAP:[],
        F5DSGAP:[],
        F5OSGAP:[],
        F1GLEVEL:[],
        F2GLEVEL:[],
        F3GLEVEL:[],
        F4GLEVEL:[],
        F5GLEVEL:[],
        F1WRBEND:[],
        F2WRBEND:[],
        F3WRBEND:[],
        F4WRBEND:[],
        F1IMRBEND:[],
        F2IMRBEND:[],
        F3IMRBEND:[],
        F4IMRBEND:[],
        F5IMRBEND:[],
        STRIMOSGAP:[],
        STRIMDSGAP:[],
        STRIMOSLAP:[],
        STRIMDSLAP:[],
        F5WRBEND:[],
        F5RTYPE:[],
        F1ENTHICK:[],
        F6TENDIFF:[],
        F1TENDIFF:[],
        F2TENDIFF:[],
        F3TENDIFF:[],
        F4TENDIFF:[],
        F5TENDIFF:[]
      }
    };
  },
  computed: {
    scrollerWidth: function () {
      return window.innerWidth * 0.758 + "px";
    },
  },
  watch: {
    tab1: {
      handler () {
        this.$nextTick(() => {
          this.$refs.tab1.doLayout()
        })
      }
    },
    deep: true
  },
  created() {
    if (localStorage.getItem("rule") == "admin") {
      this.rule = true;
    }
  },
  mounted() {
    let user = localStorage.getItem("username");
    this.navs = localStorage.getItem("menus");
    // this.navs = JSON.parse(localStorage.getItem('menus'))
    if (this.$route.path !== "/board") {
      if (!user) {
        this.$router.push({ path: "/" });
      } else {
        this.sname = user.sname;
      }
    }
    this.test();
    this.timer = setInterval(() => {
      this.resetForm();
    }, 180000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
    this.timer = null;

    this.newDialogFormVisible = false;
    this.newDialogFormVisible2d = false;
    this.newDialogFormVisible3d = false;
    this.newDialogFormVisible_pinjie = false;
    this.tableDataDialog_pinjie = []
    this.diglogShow = false;
    this.diglogShow2d = false;
    this.diglogShow3d = false;
    this.diglogShow_pinjie = false;
  },
  destroyed() {
    // 页面卸载的时候解除引用
    clearInterval(this.timer); // 清除定时器
    this.timer = null;
  },
  methods: {
    handleInput(event) {
      if (event && event.key === 'Enter') {
        this.searchInfo.entids += ','
        // 阻止默认的回车键行为，防止自动提交表单
        event.preventDefault()
      }
    },
    //查询列表数据
    async test() {
      // console.log('Querying with roll numbers:', this.searchInfo.entid);
      clearInterval(this.timer); // 清除定时器
      this.timer = null;
      this.condition = " where EXLENGTH>500 ";
      if (this.searchInfo.entid) {
        if (this.searchInfo.entid.length<6) {
          this.$message.error("卷号长度不能少于6位");
          return;
        }
        else{
          this.condition = " where PRODUCTID like'%" + this.searchInfo.entid + "%' ";
        }
      }
      if (this.searchInfo.entids) {
        if (this.searchInfo.entids.length<6) {
          this.$message.error("卷号长度不能少于6位");
          return;
        }
        else{
          const arr = this.searchInfo.entids.split('\n')
          // console.log('arr:', arr);
          this.condition = " where PRODUCTID in (" + arr.map(item => `'${item}'`).join(',') + ") ";
        }
      }
      if (this.searchInfo.day_search) {
        this.condition +=
          " and DATE_FORMAT(PRODTIME,'%Y-%m-%d') > date_add('" + this.searchInfo.day_search + "',interval -1 day) and DATE_FORMAT(PRODTIME,'%Y-%m-%d') <  date_add('" + this.searchInfo.day_search + "',interval 1 day)";
      }
      if (this.searchInfo.dbegin && this.searchInfo.dend) {
        var days = moment(this.searchInfo.dend).diff(
          moment(this.searchInfo.dbegin),
          "day"
        );
        if (days > 7) {
          this.$message.error("时间间隔不能超过7天");
          return;
        }
        this.condition +=
          " and DATE_FORMAT(STR_TO_DATE(t.PRODTIME, '%Y%m%d%H%i%s'),'%Y-%m-%d %H:%i:%s') between'" +
          this.searchInfo.dbegin +
          "' and '" +
          this.searchInfo.dend +
          "' ";
      }
      if ( !this.searchInfo.day_search && !this.searchInfo.entids &&!this.searchInfo.dbegin &&!this.searchInfo.dend)
      {
        this.condition +=
          " and t.PRODTIME > curdate() ";
      }
      var sql_string =
        "SELECT DATE_FORMAT(STR_TO_DATE(t.PRODTIME, '%Y%m%d%H%i%s'),'%Y-%m-%d %H:%i:%s') as PRODTIME_T,t.* from TB_PLTCM_RES t @where ORDER BY t.PRODTIME DESC";
      let res = await http.post("/aps/DB_Query", {
        sql: sql_string,
        "@where": this.condition,
        db: "NERCAR",
      });
      if (res.data.count == 0) {
          this.$message.error("未查询到数据");
      }
      else{
        for (var i = 0; i < res.data.data.length; i++) {
          res.data.data[i].GRADE = res.data.data[i].GRADE.trim();//去除钢种字符串两端空格
          res.data.data[i].REDUCTRATE = parseFloat(
            res.data.data[i].REDUCTRATE
          ).toFixed(2);
          res.data.data[i].ENTHICK = parseFloat(res.data.data[i].ENTHICK).toFixed(3);
          res.data.data[i].EXTHICK = parseFloat(res.data.data[i].EXTHICK).toFixed(3);
          res.data.data[i].PAOPIAN_RATE = parseFloat(res.data.data[i].PAOPIAN_RATE*100).toFixed(0);

          res.data.data[i].FLAT_BIGGERTHANMAX_RATE = parseFloat(res.data.data[i].FLAT_BIGGERTHANMAX_RATE*100).toFixed(2);
          res.data.data[i].OPPOSITE_SIGN_RATE = parseFloat(res.data.data[i].OPPOSITE_SIGN_RATE*100).toFixed(2);
          res.data.data[i].DIFFER_10_RATE = parseFloat(res.data.data[i].DIFFER_10_RATE*100).toFixed(2);
          res.data.data[i].CLASS_RATE1 = parseFloat(res.data.data[i].CLASS_RATE1*1).toFixed(2);
          res.data.data[i].CLASS_RATE2 = parseFloat(res.data.data[i].CLASS_RATE2*1).toFixed(2);
          res.data.data[i].CLASS_RATE3 = parseFloat(res.data.data[i].CLASS_RATE3*1).toFixed(2);
          res.data.data[i].CLASS_RATE4 = parseFloat(res.data.data[i].CLASS_RATE4*1).toFixed(2);
          res.data.data[i].CLASS_RATE5 = parseFloat(res.data.data[i].CLASS_RATE5*1).toFixed(2);
          res.data.data[i].CLASS_RATE6 = parseFloat(res.data.data[i].CLASS_RATE6*1).toFixed(2);
          res.data.data[i].CLASS_RATE7 = parseFloat(res.data.data[i].CLASS_RATE7*1).toFixed(2);
          res.data.data[i].THICK_RATE = parseFloat(res.data.data[i].THICK_RATE*1).toFixed(2);
        }
      }
      this.tableData = res.data.data;
      // this.tableData = Object.entries(res.data.data)
    },
    // 查询板形数据
    async queryPlate(row, flag) {
      let res = await http.post("/apm/MDB_Query", {
        coll_name: "PLTCM1_ASC_DATA",
        filter: {
            "mat_no": row.PRODUCTID
        }
      });
      if (flag == 1) {
        this.draw_2d("" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 板形2D图", res.data);
      } else {
        this.draw_3d("" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 板形3D图", res.data);
        // this.draw_test(row.PRODUCTID, res.data.data);
      }
    },
    // 查询拼接板形数据
    async queryPlate_pinjie(row) {
      // 查询拼接卷号和信息
      let res = await http.post("/aps/DB_Query", {
        sql:
          "WITH ranked_products AS ( SELECT LAG(productid) OVER (ORDER BY prodtime) AS prev_productid, LEAD(productid) OVER (ORDER BY prodtime) AS next_productid,t.* FROM tb_pltcm_res t where t.exlength >500),selected_products AS ( SELECT * FROM ranked_products @where) SELECT * FROM selected_products ORDER BY prodtime",
        "@where":
          "WHERE productid = '" + row.PRODUCTID + "' OR prev_productid = '" + row.PRODUCTID + "' OR next_productid = '" + row.PRODUCTID + "'",
        db: "NERCAR",
      });
      this.tableDataDialog_pinjie = res.data.data;
      this.tableDataDialog_pinjie[0].TITLE = '前行卷'
      this.tableDataDialog_pinjie[1].TITLE = '当前卷'
      let PRODUCTID10 = res.data.data[0].PRODUCTID?res.data.data[0].PRODUCTID:'';
      let PRODUCTID00 = res.data.data[1].PRODUCTID?res.data.data[1].PRODUCTID:'';
      let PRODUCTID01 = ''
      if(res.data.data.length == 3){
        PRODUCTID01 = res.data.data[2].PRODUCTID?res.data.data[2].PRODUCTID:'';
        this.tableDataDialog_pinjie[2].TITLE = '后行卷'
      }
      // 查询拼接卷号和信息
      let res2 = await http.post("/aps/DB_Query", {
        sql:
          "select DISTINCT * from flatnessmap t @where",
        "@where":
          "where t.PRODUCTID in ('"+ PRODUCTID10 +"','" + PRODUCTID00 + "','"+ PRODUCTID01 +"') AND T.X >0  ORDER BY CASE productid WHEN '"+ PRODUCTID10 +"' THEN 1 WHEN '" + PRODUCTID00 + "' THEN 2 WHEN '"+ PRODUCTID01 +"' THEN 3 END,x",
        db: "ORACLE",
      });

      this.draw_pinjie("前行卷：" + PRODUCTID10 + "     <==     当前卷：" + PRODUCTID00 + "     ==>     后行卷：" + PRODUCTID01 + "", res2.data.data);
    },

    // 查询工艺参数曲线数据
    async query_process_data(row) {
      let res = await http.post("/aps/DB_Query", {
        sql:
          "SELECT ENTHICK, ENWIDTH, ENLENGTH, GRADE, PRODTIME, PRODUCTID, REDUCTRATE, TLELONG, TLMESH1, TLMESH2, TLMESH3, TLSPEED, TLTENSION, PLSPEED, AT1TEMP, AT1HCLCONC, AT1FECLCONC, AT2TEMP, AT2HCLCONC, AT2FECLCONC, AT3TEMP, AT3HCLCONC, AT3FECLCONC, RT4PH, RT4TEMP, RT1PH, EXWIDTH, EXTHICK, F1FORCE, F1ENTENS, F1EXTENS, F1SPEED, F1REDRATE, F1EMULPRESS, F1BLOWPRESS, F2FORCE, F2ENTENS, F2EXTENS, F2SPEED, F2REDRATE, F2EMULPRESS, F2BLOWPRESS, F3FORCE, F3ENTENS, F3EXTENS, F3SPEED, F3REDRATE, F3EMULPRESS, F3BLOWPRESS, F4FORCE, F4ENTENS, F4EXTENS, F4SPEED, F4REDRATE, F4EMULPRESS, F4BLOWPRESS, F5FORCE, F5ENTENS, F5EXTENS, F5SPEED, F5REDRATE, F5EMULPRESS, F5BLOWPRESS, CRMCOILTEMP, HCOILID, EXLENGTH, BISGGRADE, AIMEDWIDTH, AIMEDTHICKNESS, MAXAIMEDWIDTH, MINAIMEDWIDTH, MAXAIMEDTHICKNESS, MINAIMEDTHICKNESS, F2DSFORCES, F1FSLIP, F2FSLIP, F3FSLIP, F4FSLIP, F5FSLIP, F1EXTHICK, F2EXTHICK, F3EXTHICK, F4EXTHICK, F5EXTHICK, F1DSFORCES, F1OSFORCES, F2OSFORCES, F3DSFORCES, F3OSFORCES, F4DSFORCES, F4OSFORCES, F5DSFORCES, F5OSFORCES, F1DSGAP, F1OSGAP, F2DSGAP, F2OSGAP, F3DSGAP, F3OSGAP, F4DSGAP, F4OSGAP, F5DSGAP, F5OSGAP, F1GLEVEL, F2GLEVEL, F3GLEVEL, F4GLEVEL, F5GLEVEL, F1WRBEND, F2WRBEND, F3WRBEND, F4WRBEND, F1IMRBEND, F2IMRBEND, F3IMRBEND, F4IMRBEND, F5IMRBEND, STRIMOSGAP, STRIMDSGAP, STRIMOSLAP, STRIMDSLAP, F5WRBEND, F5RTYPE, F1ENTHICK, F6TENDIFF, F1TENDIFF, F2TENDIFF, F3TENDIFF, F4TENDIFF, F5TENDIFF, t2.f5speed_up_down from processdata t left join (SELECT insdate,f5speed_AVG,next_record_f5speed,CASE WHEN (f5speed_AVG>next_record_f5speed) THEN 'down' else 'up' end f5speed_up_down FROM (SELECT T1.*,lead(f5speed_AVG, 1, null) over (order by insdate)  next_record_f5speed FROM (select AVG(f5speed) f5speed_AVG,insdate from processdata t where productid = '" +
          row.PRODUCTID +
          "' GROUP BY insdate) T1 order by insdate ASC ))t2 on t2.insdate = t.insdate where productid = '" +
          row.PRODUCTID +
          "' order by t.insdate,CASE WHEN f5speed_up_down = 'up' THEN f5speed END ASC,CASE WHEN f5speed_up_down = 'down' THEN f5speed END DESC",
        db: "ORACLE",
      });

      let res_process = [];
      res_process = res.data.data;
      let keyNames=Object.keys(this.process_date_line)
      for (let key of keyNames) {
        this.process_date_line[key] = []
      }
      res_process.forEach((item, index) => {
        for (let id = 0; id < this.process_lists.length; id++) {
          const element = this.process_lists[id];
          this.process_date_line[element].push(item[element]);
        }
        this.process_date_line.echartX1.push(
          parseFloat((row.EXLENGTH / res_process.length) * index).toFixed(0)
        );
      });
    },

    // 查询2d板形相关曲线数据 PLTCM1_PROCESS_DATA
    async query_2d_data(row) {
      let res = await http.post("/apm/MDB_Query", {
        coll_name: "PLTCM1_PROCESS_DATA",
        filter: {
            "_id": row.PRODUCTID
        }
      });
      // let echartY1 = [];
      // let echartY2 = [];
      // let echartY3 = [];
      // let echartX1 = [];
      // let res_real = [];
      // res_real = res.data;
      // res_real.forEach((item, index) => {
      //   echartY1.push(item.F5SPEED);
      //   echartY2.push(item.F5GLEVEL);
      //   echartY3.push(item.F5EXTHICK / 1000);
      //   echartX1.push(
      //     parseFloat((row.EXLENGTH / res_real.length) * index).toFixed(0)
      //   );
      // });

      // let s5_speed_data = []
      // let s5_level_data = []
      // let s5_exthick_data = []
      //s5_speed_data = res.data["PROCESS_DATA"]["F5SPEED"]
      //s5_level_data = res.data["PROCESS_DATA"]["F5GLEVEL"]
      let out_thickness_dev = []//out_thickness_dev
      let actual_tension = []//actual_tension
      actual_tension = res.data["actual_tension"]
      out_thickness_dev = res.data["out_thickness_dev"]
      let echartX1 = [];
      actual_tension.forEach((item, index) => {
        echartX1.push(
          parseFloat((row.EXLENGTH / actual_tension.length) * index).toFixed(0)
        );
      });
      // //厚度需要除1000
      // res.data["PROCESS_DATA"]["F5EXTHICK"].forEach((item, index) => {
      //   s5_exthick_data.push(
      //     parseFloat((item)/1000)
      //   );
      // });

      //this.draw_s5_speed( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " S5速度、调平", echartX1, s5_speed_data,s5_level_data);
      //this.draw_s5_exthick( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " S5出口厚度", echartX1, s5_exthick_data);
      //this.draw_s5_level( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " S5调平", echartX1, s5_level_data);
      this.draw_actual_tension( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 实际张力", echartX1, actual_tension);
      this.draw_out_thickness_dev( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 出口厚度偏差", echartX1, out_thickness_dev);

      // 板形均值、肋差等数据
      // let res1 = await http.post("/aps/DB_Query", {
      //   sql:
      //     "SELECT CREATE_TIME, PRODUCTID, X, PRIMARY_TERM, QUADRATIC_TERM, FLATAVE, FLATAVE_POSITIVE,RIBBED_WAVE FROM TB_PLTCM_RES_ASC_NIHE t @where ",
      //   "@where":
      //     "WHERE t.PRODUCTID = '" +
      //     row.PRODUCTID +
      //     "' ORDER BY t.x ASC  ",
      //   db: "NERCAR",
      // });
      let res1 = await http.post("/apm/MDB_Query", {
        coll_name: "PLTCM_ASC_RESULT",
        filter: {
            "_id": row.PRODUCTID
        }
      });
      let priterm = [];
      let quaterm = [];
      let flatave = [];
      let flatave_positive = [];
      let ribbed_wave = [];
      let X = [];
      let res_reali = [];
      priterm = res1.data["priterm"]
      quaterm = res1.data["quaterm"]
      flatave = res1.data["flat_ave"]
      flatave_positive = res1.data["flat_ave_positive"]
      ribbed_wave = res1.data["Ribbed_wave"]
      for (let index = 0; index < priterm.length; index++) {
        X.push(
          parseFloat((row.EXLENGTH / priterm.length) * index).toFixed(0)
        );
      }

      // res_reali = res1.data;
      // res_reali.forEach((item, index) => {
      //   priterm.push(item.priterm);
      //   quaterm.push(item.quaterm);
      //   flatave.push(item.flat_ave);
      //   flatave_positive.push(item.flat_ave_positive);
      //   ribbed_wave.push(item.Ribbed_wave);
      //   X.push(
      //     parseFloat((row.EXLENGTH / res_reali.length) * index).toFixed(0)
      //   );
      // });
      this.draw_nihe( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 板形二次拟合系数DS-OS", X, priterm, quaterm);
      this.draw_flatave( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 板形均值", X, flatave_positive, flatave);
      this.draw_ribbed_wave( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 两侧肋部通道板形均值差(DS-OS)", X, ribbed_wave);
    },
    //转换时间格式
    formatterTime(row) {
      return moment(row.createtime).format("YYYY-MM-DD HH:mm:ss");
    },
    ming(scope) {
      return scope < 80 ? 'ColorRed' : ''
    },
    risk(scope) {
      return scope > 50 ? 'ColorRed' : ''
    },
    banxing_risk(scope) {
      return scope > 10 ? 'ColorRed' : ''
    },
    MAX_F1TENDIFF_risk(scope) {
      return scope > 10 ? 'ColorRed' : ''
    },
    MAX_F5GLEVEL_C_risk(scope) {
      return scope > 0.12 ? 'ColorRed' : ''
    },
    //树选择
    handleNodeClick (node, selectNode) {
      var slesas = selectNode.checkedNodes.filter(item => {
        return !item.children
      })
      var selectedKeys = []
      slesas.forEach(item => {
        selectedKeys.push(item.id)
      })
      this.series_data_line = []
      this.series_data_name = []
      for (let index = 0; index < selectedKeys.length; index++) {
        //找英文数组对应下标
        let index_list = this.process_lists.findIndex((val) => {
          return val == selectedKeys[index]
        })
        const element = selectedKeys[index];
        const element_cn = this.process_lists_name[index_list];
        let series_data =
        {
          name: element_cn,
          data: this.process_date_line[element],
          type: "line",
          symbol: "none",
        };
        this.series_data_line.push(series_data)
        this.series_data_name.push(element_cn)
      }
      this.echart_process_data(this.process_date_line.echartX1, this.series_data_name, this.series_data_line);
      // console.log(selectedKeys)
    },
    handleTableRow_processdata(row) {
      this.newDialogFormVisible = true;
      this.diglogShow = true;
      this.tableDataDialog = [row];
      this.query_process_data(row);
    },
    // 2D按钮
    handleTableRow(row) {
      const rowIndex = this.tableData.indexOf(row)
      this.coil_index=rowIndex
      this.newDialogFormVisible2d = true;
      this.diglogShow2d = true;
      this.tableDataDialog = [row];
      this.queryPlate(row, 1);
      this.query_2d_data(row);
    },
    //  3D按钮
    handleTableRow_3d(row) {
      this.newDialogFormVisible3d = true;
      this.diglogShow3d = true;
      this.tableDataDialog = [row];
      this.queryPlate(row, 2);
    },

    // 拼接按钮
    handleTableRow_pinjie(row) {
      this.newDialogFormVisible_pinjie = true;
      this.diglogShow_pinjie = true;
      // this.tableDataDialog = [row];
      this.queryPlate_pinjie(row);
    },
    // 2D弹窗内切换钢卷
    toogleCoilIn2D(index) {
      if(index<0){
        this.$message({
          message: '已是最后一卷',
          type: 'warning',
        })
        return
      }
      if(index==this.tableData.length){
        this.$message({
          message: '已是第一卷',
          type: 'warning',
        })
        return
      }
      this.coil_index=index
      this.tableDataDialog = [this.tableData[index]];
      this.queryPlate(this.tableData[index], 1);
      this.query_2d_data(this.tableData[index]);
    },
    // 工艺参数曲线
    echart_process_data (xdata, series_data_name, series_data) {
      var myChart = Echarts.init(
        document.getElementById("app0"),
        "light"
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: "酸轧工艺参数",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          iconStyle: {
            borderColor: '#fff'
          },
          feature: {
            dataView: {
              show: true,
              lang: ['数据视图', '关闭', '导出Excel'],
              //optionToContent为重画表格的函数
              optionToContent: function (opt) {
                //axisData是你想定义的表格第一列的数据，我这里设置为柱形图的x轴数据
                var axisData = opt.xAxis[0].data
                //tAxis[0]为你想定义的表格第一行的数据
                var txisData = opt.legend[0].data
                var series = opt.series
                //表头
                var tdHeads = '<td  style="padding: 0 10px"></td>'
                var tdBodys = ''
                var nameData = txisData
                for (var i = 0; i < nameData.length; i++) {
                  tdHeads +=
                    '<td style="padding: 0 10px">' + nameData[i] + '</ td >'
                }
                var table =
                  '<table id="Mytable" border="1" class="table table-bordered table-striped table-hover" style="width:100%;text-align:center;color: #000;" ><tbody><tr>' +
                  tdHeads +
                  ' </tr>'
                for (var i = 0, l = axisData.length; i < l; i++) {
                  for (var j = 0; j < series.length; j++) {
                    if (series[j].data != undefined) {
                      var temp = series[j].data[i]
                      if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>'
                      } else {
                        tdBodys += '<td></td>'
                      }
                    }
                  }
                  table +=
                    '<tr><td style="padding: 0 10px">' +
                    axisData[i] +
                    '</td>' +
                    tdBodys +
                    '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table>'
                return table
              },
              //contentToOption为重写“刷新”按钮的语句
              contentToOption: function (HTMLDomElement, opt) {
                let et = XLSX.utils.table_to_book(
                  document.getElementById('Mytable')
                )
                let etout = XLSX.write(et, {
                  bookType: 'xlsx',
                  bookSST: true,
                  type: 'array'
                })
                try {
                  FileSaver.saveAs(
                    new Blob([etout], {
                      type: 'application/octet-stream'
                    }),
                    'echarts数据' + '-' + new Date().toLocaleString() + '.xlsx'
                  )
                } catch (e) { }
                return etout
              }
            },
            magicType: { show: true },
            restore: { show: true },
            saveAsImage: { show: true },
            // dataZoom: {show: true},
            myTool: {
              show: true, //是否显示
              title: '定义y轴', //鼠标悬空的提示文字
              icon:
                'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
              onclick: o => {
                this.sum = 1
                this.dialogVisible2 = true
                this.dialogTitle = '定义Y轴刻度范围'
              }
            }
          }
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
            data: series_data_name,
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 14
            },
        },
        dataZoom: [
          {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: xdata,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          // name: "[mm]",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          max:this.myChart_process_data_max1,
          min:this.myChart_process_data_min1,
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        backgroundColor: '#1f3293',
        series: series_data
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear();
      myChart.setOption(option);
      myChart.resize();
    },
    // 2D板形图
    draw_2d(title_text, datas10) {
      // var need_x11 = [];
      // let keyNames = [];
      // let res = [];
      // for (var i = 0; i < datas10.length; i++) {
      //   need_x11.push(datas10[i].X);
      //   keyNames = Object.keys(datas10[0]);
      // }
      // keyNames.splice(keyNames.length - 3, 3);
      // keyNames = keyNames.sort((a, b) => a - b);
      // // console.log(keyNames)
      // let resultData = {};
      // for (var j = 0; j < keyNames.length; j++) {
      //   resultData[keyNames[j]] = [];
      //   for (var k = 1; k < datas10.length; k++) {
      //     resultData[keyNames[j]].push(datas10[k][keyNames[j]] * 1);
      //   }
      // }
      // let index_arr = []
      // let first_index = 0
      // let last_index = 58
      // Object.entries(resultData).forEach(([key, value],resultData_index) => {
      //   // const macthReq = /FLATNESS26_(\d+)$/.exec(key)
      //   //if (value.every((i) => i === 0)) return;
      //   let not0 = 0
      //   for (var i = 0; i < value.length; i++) {
      //     if (value[i]!=0) not0++;
      //   }
      //   if (not0<10) return;
      //   index_arr.push(resultData_index + 1)
      // });
      // first_index = index_arr[0]
      // last_index = index_arr[index_arr.length - 1]
      // Object.entries(resultData).forEach(([key, value],resultData_index) => {
      //   const index = key.substring(11, key.length) * 1;
      //   //判断范围在正常通道号之间再放板形数据
      //   if(first_index < index < last_index){
      //     value.forEach((v, i) => {
      //       res.push([i + 1, index, v]);
      //     });
      //   }
      // });
      // res = res.sort((a, b) => a[0] - b[0]);

      //以通道为列整理
      this.ecahrtsOption = []
      const optionName = []
      let name = ''
      for (i = 1; i < 31; i++) {
        if (i < 10) {
          name = 'SHAPE_FB_CH_' + i
        } else {
          name = 'SHAPE_FB_CH_' + i
        }
        optionName.push(name)
      }
      for (i in optionName) {
        const key = optionName[i]
        this.ecahrtsOption.push(datas10["FLATNESS_MAP"][key])
      }
      const res = []
      const xAxis = []
      const yAxis = []// Y轴通道号
      for (i = 0; i < this.ecahrtsOption[0].length; i++) {
        xAxis.push(i)
      }
      for (var i = 0; i < this.ecahrtsOption.length; i++) {
        yAxis.push(i) // Y轴通道号
      }

      var y1 = 0 // 有数的最小索引
      var y5 = 29 // 有数的最大索引
      for (var i = 1; i < this.ecahrtsOption.length/2; i++) {
        const minnum = Math.min.apply(null, this.ecahrtsOption[i])
        const maxnum = Math.max.apply(null, this.ecahrtsOption[i])
        var minnum2 = Math.min.apply(null, this.ecahrtsOption[i - 1])
        var maxnum2 = Math.max.apply(null, this.ecahrtsOption[i - 1])
        if (minnum2 === 0 && maxnum2 === 0 && (minnum !== 0 || maxnum !== 0)) {
          y1 = i;break;
        }
      }
      for (var i = this.ecahrtsOption.length-2; i > this.ecahrtsOption.length/2; i--) {
        const minnum = Math.min.apply(null, this.ecahrtsOption[i])
        const maxnum = Math.max.apply(null, this.ecahrtsOption[i])
        var minnum2 = Math.min.apply(null, this.ecahrtsOption[i - 1])
        var maxnum2 = Math.max.apply(null, this.ecahrtsOption[i - 1])
        if (minnum === 0 && maxnum === 0 && (minnum2 !== 0 || maxnum2 !== 0)) {
          y5 = i - 1;break;
        }
      }

      //头尾对调判断
      let text = ''
      if (this.headTailFlag) {
        if (this.DSOSFlag) {
          this.ecahrtsOption.map((item, index) => {
            item.map((item2, index2) => {
              const v = item2
              if (index >= y1 && index <= y5) {
                res.push([xAxis.length - index2, yAxis.length-index, v])
              }
            })
          })
          text = title_text + '(头尾对调)(两侧对调)'
        } else {
          this.ecahrtsOption.map((item, index) => {
            item.map((item2, index2) => {
              const v = item2
              if (index >= y1 && index <= y5) {
                res.push([xAxis.length - index2, index, v])
              }
            })
          })
          text = title_text + '(头尾对调)'
        }
      } else {
        if (this.DSOSFlag) {
          this.ecahrtsOption.map((item, index) => {
            item.map((item2, index2) => {
              const v = item2
              if (index >= y1 && index <= y5) {
                res.push([index2, yAxis.length-index, v])
              }
            })
          })
          text = title_text + '(两侧对调)'
        } else {
          this.ecahrtsOption.map((item, index) => {
            item.map((item2, index2) => {
              const v = item2
              if (index >= y1 && index <= y5) {
                res.push([index2, index, v])
              }
            })
          })
          text = title_text
        }
      }
      // this.ecahrtsOption.map((item, index) => {
      //   item.map((item2, index2) => {
      //     /* if (min > item2) {
      //       min = item2 / 20
      //     }
      //     if (max < item2) {
      //       max = item2 / 20
      //     }*/
      //     const num = item2
      //     if (index >= y1 && index <= y5) {
      //       res.push([index2, index, num])
      //     }
      //   })
      // })

      var myChart = Echarts.init(document.getElementById("app_2d"), "light"); //将配置注入到html中定义的容器
      var option = {
        animation: false,
        title: {
          text: text,
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontSize: 18,
          },
        },
        tooltip: {},
        grid: {
          left: "1%",
          right: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          intercal: 50,
          boundaryGap: false,
          name: "长度[m]",
          axisLine: {
            lineStyle: {
              color: "#bdc0c7",
              width: 1, //这里是为了突出显示加上的
            },
          },
          nameTextStyle: {
            fontSize: 15,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          axisPointer: {
            value: "1",
            lineStyle: {
              color: "#ff0640",
              opacity: 0.5,
              width: 2,
            },
            handle: {
              show: true,
              size: 20,
              margin: 40,
              color: "#ff0640",
            },
          },
          data: xAxis,
        },
        yAxis: {
          name: "通道",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          type: "category",
          data: ['OS_C1', 'C2', 'C3','C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10', 'C11', 'C12','C13', 'C14', 'C15', 'C16', 'C17', 'C18', 'C19', 'C20', 'C21','C22', 'C23', 'C24', 'C25', 'C26', 'C27', 'C28', 'C29', 'DS_C30'],
          // data: yAxis
        },
        legend: {
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        visualMap: {
          min: -25,
          max: 25,
          calculable: true,
          orient: "vertical",
          left: "right",
          top: "center",
          realtime: false,
          textStyle: {
            color: "#ffffff",
          },
          inRange: {
            color: [
              "RGB(0,10,255)",
              "RGB(0,150,255)",
              "RGB(0,199,255)",
              "#11fff9",
              "RGB(0,255,0)",
              "#FFF500",
              "RGB(255,230,0)",
              "RGB(249, 102, 0)",
              "RGB(255,0,0)",
            ],
          },
        },
        series: [
          {
            progressive: 0,
            // name: '带钢板形2D图',
            type: "heatmap",
            animation: false, // 是否开启动画
            large: true, // 开启大数据量优化
            // sampling: "lttb", //降采样策略
            data: res,
            label: {
              normal: {
                show: false,
                color: "#fff",
                /*position: 'inner'*/
              },
            },
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              //通常情况下：
              normal: {
                label: {
                  width: 2,
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            tooltip: {
              position: "top",
              backgroundColor: "rgba(0,0,0,0.5)",
              borderColor: "#333",
              borderWidth: 0,
              padding: 2,
              textStyle: {
                color: "#fff",
              },
              extraCssText:
                "box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);font-weight:bold;",
              show: true,
              formatter: function (params) {
                return params.value[2];
              },
            },
          },
        ],
      };
      //清空画布，防止缓存
      myChart.clear();
      //使用刚指定的配置项和数据显示图表。mouseover
      myChart.setOption(option, true);
    },
    // 板形拼接图
    draw_pinjie(title_text, datas10,index) {
      var need_x11 = [];
      let keyNames = [];
      let res = [];
      for (var i = 0; i < datas10.length; i++) {
        need_x11.push(datas10[i].X);
        keyNames = Object.keys(datas10[0]);
      }
      keyNames.splice(keyNames.length - 3, 3);
      keyNames = keyNames.sort((a, b) => a - b);
      // console.log(keyNames)
      let resultData = {};
      for (var j = 0; j < keyNames.length; j++) {
        resultData[keyNames[j]] = [];
        for (var k = 1; k < datas10.length; k++) {
          resultData[keyNames[j]].push(datas10[k][keyNames[j]] * 1);
        }
      }
      Object.entries(resultData).forEach(([key, value]) => {
        // const macthReq = /FLATNESS26_(\d+)$/.exec(key)
        if (value.every((i) => i === 0)) return;
        const index = key.substring(11, key.length) * 1;
        value.forEach((v, i) => {
          res.push([i + 1, index, v]);
        });
      });
      res = res.sort((a, b) => a[0] - b[0]);
      var head_tail_flag=[]
      var markLine_data = []
      //查找带钢拼接位置
      for (var i = 0; i < need_x11.length; i++) {
          if(i<need_x11.length-1&&need_x11[i+1]-need_x11[i]<0){
              head_tail_flag.push(i+1)
          }
      }
      markLine_data.push({xAxis: head_tail_flag[0],name:'分界线',label: {show: true,formatter: '头'}})
      if (head_tail_flag.length == 2) {
          markLine_data.push({xAxis: head_tail_flag[1],name:'分界线',label: {show: true,formatter: '尾'}})
      }
      var myChart = Echarts.init(document.getElementById("app_pinjie"), "light"); //将配置注入到html中定义的容器
      var option = {
        animation: false,
        title: {
          text: title_text,
          left: "center",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontSize: 18,
          },
        },
        tooltip: {},
        grid: {
          left: "1%",
          right: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          intercal: 50,
          boundaryGap: false,
          name: "长度[m]",
          axisLine: {
            lineStyle: {
              color: "#bdc0c7",
              width: 1, //这里是为了突出显示加上的
            },
          },
          nameTextStyle: {
            fontSize: 15,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          axisPointer: {
            value: "1",
            lineStyle: {
              color: "#ff0640",
              opacity: 0.5,
              width: 2,
            },
            handle: {
              show: true,
              size: 20,
              margin: 40,
              color: "#ff0640",
            },
          },
          data: need_x11,
        },
        yAxis: {
          name: "通道",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          type: "category",
          data: ['OS_C1', 'C2', 'C3','C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10', 'C11', 'C12','C13', 'C14', 'C15', 'C16', 'C17', 'C18', 'C19', 'C20', 'C21','C22', 'C23', 'C24', 'C25', 'C26', 'C27', 'C28', 'C29', 'C30','C31', 'C32', 'C33', 'C34', 'C35', 'C36', 'C37', 'C38', 'C39','C40', 'C41', 'C42', 'C43', 'C44', 'C45', 'C46', 'C47', 'C48', 'C49','C50', 'C51', 'C52', 'C53', 'C54', 'C55', 'C56', 'C57', 'DS_C58'],
        },
        legend: {
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        visualMap: {
          min: -25,
          max: 25,
          calculable: true,
          orient: "vertical",
          left: "right",
          top: "center",
          realtime: false,
          textStyle: {
            color: "#ffffff",
          },
          inRange: {
            color: [
              "RGB(0,10,255)",
              "RGB(0,150,255)",
              "RGB(0,199,255)",
              "#11fff9",
              "RGB(0,255,0)",
              "#FFF500",
              "RGB(255,230,0)",
              "RGB(249, 102, 72)",
              "RGB(255,0,0)",
            ],
          },
        },
        series: [
          {
            blurSize: 10,
            pointSize: 10, // 设置热力图上点的大小
            symbolSize: 200,
            // name: '带钢板形2D图',
            type: "heatmap",
            animation: false, // 是否开启动画
            large: true, // 开启大数据量优化
            sampling: "average", //降采样策略
            data: res,
            label: {
              normal: {
                show: false,
                color: "#fff",
                /*position: 'inner'*/
              },
            },
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              //通常情况下：
              normal: {
                label: {
                  width: 2,
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            markLine: {
              lineStyle: {
                  color: "#ffcd39",
                  type: "solid"
              },
              data: markLine_data,
              symbol: "none",
            },
            tooltip: {
              position: "top",
              backgroundColor: "rgba(0,0,0,0.5)",
              borderColor: "#333",
              borderWidth: 0,
              padding: 2,
              textStyle: {
                color: "#fff",
              },
              extraCssText:
                "box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);font-weight:bold;",
              show: true,
              formatter: function (params) {
                return params.value[2];
              },
            },
          }
        ],
      };
      //清空画布，防止缓存
      myChart.clear();
      //使用刚指定的配置项和数据显示图表。mouseover
      myChart.setOption(option, true);
    },
    // 曲线一
    draw_s5_speed(title_text, data, data2,data_level) {
      var myChart = Echarts.init(document.getElementById("app_s5_speed"), "light");
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: title_text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "right",
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          // name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          intercal: 50,
          boundaryGap: false,
          nameTextStyle: {
            fontSize: 15,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
          axisTick: {
            alignWithLabel: true
          },
        },
        yAxis: [{
          name: "S5速度[m/min]",
          type: "value",
          position: 'left',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },{
          name: "S5调平[mm]",
          type: "value",
          position: 'right',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {show: false},
          max:0.5,
          min:-0.5,
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
            onZero: true,
          },
        }],
        series: [
          {
            name: "S5速度[m/min]",
            data: data2,
            yAxisIndex: 0,//相对应的坐标轴
            type: "line",
            color: "#FFFF00",
            // barWidth: "30%",
            showSymbol: false,
            label: {
              position: "top",
              color: "#fff",
            },
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed",
                  color: "#FFFF00 ", // 这儿设置安全基线颜色
                },
              },
              data: [],
              symbol: "none",
              label: {
                normal: {
                  show: true, // 这儿设置安全基线
                },
              },
            },
          },{
            name: "S5调平[mm]",
            data: data_level,
            yAxisIndex: 1,//相对应的坐标轴
            type: "line",
            color: "#00F0FF",
            symbol: "none",
            // barWidth: "30%",
            label: {
              position: "top",
              color: "#fff",
            },
          }
        ],
      };
      //清空画布，防止缓存
      // myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
      myChart.getZr().on("click", function (params) {
        var pointInPixel= [params.offsetX, params.offsetY];
        if (myChart.containPixel('grid',pointInPixel)) {
          const pointInPixel = [params.offsetX, params.offsetY];
          // console.log('pointInPixel', pointInPixel)
          // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值，借助于索引值的获取到其它的信息
          // 转换X轴坐标
          let pointInGrid = myChart.convertFromPixel(
            { seriesIndex: 0 },
            pointInPixel
          );
          // x轴数据的索引值
          // console.log('pointInGrid', pointInGrid2)

          // 所点击点的X轴坐标点所在X轴data的下标
          let xIndex = pointInGrid[0];
          // 所点击点的Y轴坐标点数值
          // let yIndex = pointInGrid2[1]
          // 使用getOption() 获取图表的option
          let op = myChart.getOption();
          console.log(op);
          //获取到x轴的索引值和option之后，我们就可以获取我们需要的任意数据。
          // 点击点的X轴对应坐标的名称
          var time = op.xAxis[0].data[xIndex];
          // 点击点的series -- data对应的值
          var value = op.series[0].data[xIndex];
          // console.log('val', time)
          let mark_aa = {
            xAxis: time,
            label: {
              formatter: function () {
                return value.toFixed(2);
              },
            },
          };
          // console.log(op.series[0].markLine.data);
          op.series[0].markLine.data.push(mark_aa);
          myChart.setOption(op);
        }
      });
      //将可以响应点击事件的范围内，鼠标样式设为pointer--------------------
      myChart.getZr().on('mousemove',function (params) {
          var pointInPixel= [params.offsetX, params.offsetY];
          if (myChart.containPixel('grid',pointInPixel)) {
            myChart.getZr().setCursorStyle('pointer');
          }
      });
      myChart.on('mouseout', function (params) {
        var pointInPixel= [params.offsetX, params.offsetY];
          if (!myChart.containPixel('grid',pointInPixel)) {
            myChart.getZr().setCursorStyle('default');
          }
        });
    },
    // 曲线二
    draw_s5_level(title_text, data, data2) {
      let text = "";
      var myChart = Echarts.init(document.getElementById("app_s5_level"), "light");
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: title_text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        brush: {
          toolbox: ["lineX", "clear"],
          xAxisIndex: 0,
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "[mm]",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          // max:0.5,
          // min:-0.5,
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        series: [
          {
            data: data2,
            type: "line",
            symbol: "none",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
          },
        ],
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
      //圈选结束后的回调
      myChart.on("brushEnd", (params) => {
        // console.log(params)
        if (params.areas.length != 0) {
          console.log(params.areas[0].coordRange);
          let start = params.areas[0].coordRange[0] + 1;
          let end = params.areas[0].coordRange[1] + 1;
          // console.log(option.xAxis.data)
          let startLength = option.xAxis.data[start];
          console.log("startLength:", startLength);
          let endLength = option.xAxis.data[end];
          console.log("endLength:", endLength);
          // console.log(data2) //开始截取该区间的Y值，计算最大最小值
          let selected_data = [];
          for (let index = start; index < end; index++) {
            selected_data.push(data2[index]);
          }
          // console.log(selected_data) //开始截取该区间的Y值，计算最大最小值
          let max = Math.max(...selected_data);
          let min = Math.min(...selected_data);
          let diff = parseFloat(max - min).toFixed(3);
          text =
            "最小值：" +
            min +
            "\xa0\xa0\xa0\xa0 最大值：" +
            max +
            "\xa0\xa0\xa0\xa0 波动量：" +
            diff;
          console.log(text);
          this.selected_s5_level_diff_text = text;
        }
      });
    },
    // 曲线三
    draw_s5_exthick(title_text, data, data2) {
      let text = "";
      let sum = 0;
      let num = 0;
      data2.forEach((val) => {
        if (val>0) {
          sum += val;
          num++;
        }
      });
      let y_max = (sum/num) + 0.1;
      let y_min = (sum/num) - 0.1;
      // let y_max = Math.max(...data2);
      // let y_min = Math.min(...data2);
      // y_max = Math.max((sum/num) + 0.1,y_max);
      // y_min = Math.min((sum/num) - 0.1,y_min);
      // console.log(y_max,y_min)
      let myChart = Echarts.init(
        document.getElementById("app_s5_exthick"),
        "light"
      );
      // 指定图表的配置项和数据
      let option = {
        title: {
          show: true,
          text: title_text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        brush: {
          toolbox: ["lineX", "clear"],
          xAxisIndex: 0,
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "[mm]",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          max:y_max.toFixed(2),
          min:y_min.toFixed(2),
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        series: [
          {
            data: data2,
            type: "line",
            symbol: "none",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
          },
        ],
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
      //圈选结束后的回调
      myChart.on("brushEnd", (params) => {
        // console.log(params)
        if (params.areas.length != 0) {
          // console.log(params.areas[0].coordRange)
          let start = params.areas[0].coordRange[0];
          let end = params.areas[0].coordRange[1];
          // console.log(option.xAxis.data)
          let startLength = option.xAxis.data[start];
          console.log("startLength:", startLength);
          let endLength = option.xAxis.data[end];
          console.log("endLength:", endLength);
          // console.log(data2) //开始截取该区间的Y值，计算最大最小值
          let selected_data = [];
          for (let index = start; index < end; index++) {
            selected_data.push(data2[index]);
          }
          // console.log(selected_data) //开始截取该区间的Y值，计算最大最小值
          let max = Math.max(...selected_data);
          let min = Math.min(...selected_data);
          let diff = parseFloat(max - min).toFixed(3);
          text =
            "最小值：" +
            min +
            "\xa0\xa0\xa0\xa0 最大值：" +
            max +
            "\xa0\xa0\xa0\xa0 波动量：" +
            diff;
          console.log(text);
          this.selected_s5_exthick_diff_text = text;
        }
      });
    },

    // 曲线一
    draw_actual_tension(title_text, data, data2) {
      let text = "";
      //头尾对调判断
      if (this.headTailFlag) {
        data2.reverse()
        text = title_text + '(头尾对调)'
      }
      else{
          text = title_text
      }
      let sum = 0;
      let num = 0;
      data2.forEach((val) => {
        if (val>0) {
          sum += val;
          num++;
        }
      });
      let y_max = (sum/num) + 0.1;
      let y_min = (sum/num) - 0.1;
      // let y_max = Math.max(...data2);
      // let y_min = Math.min(...data2);
      // y_max = Math.max((sum/num) + 0.1,y_max);
      // y_min = Math.min((sum/num) - 0.1,y_min);
      // console.log(y_max,y_min)
      let myChart = Echarts.init(
        document.getElementById("app_actual_tension"),
        "light"
      );
      // 指定图表的配置项和数据
      let option = {
        title: {
          show: true,
          text: text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "出口实际张力",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          // max:y_max.toFixed(2),
          // min:y_min.toFixed(2),
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        series: [
          {
            data: data2,
            type: "line",
            symbol: "none",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100,
          }
        ]
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
    },

    draw_out_thickness_dev(title_text, data, data2) {
      let text = "";
      //头尾对调判断
      if (this.headTailFlag) {
        data2.reverse()
        text = title_text + '(头尾对调)'
      }
      else{
          text = title_text
      }
      let sum = 0;
      let num = 0;
      data2.forEach((val) => {
        if (val>0) {
          sum += val;
          num++;
        }
      });
      let y_max = (sum/num) + 0.05;
      let y_min = (sum/num) - 0.05;
      // let y_max = Math.max(...data2);
      // let y_min = Math.min(...data2);
      // y_max = Math.max((sum/num) + 0.1,y_max);
      // y_min = Math.min((sum/num) - 0.1,y_min);
      // console.log(y_max,y_min)
      let myChart = Echarts.init(
        document.getElementById("app_out_thickness_dev"),
        "light"
      );
      // 指定图表的配置项和数据
      let option = {
        title: {
          show: true,
          text: text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "厚度偏差[mm]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "出口厚度偏差[mm]",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          scale: true,
          // max:y_max.toFixed(2),
          // min:y_min.toFixed(2),
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        series: [
          {
            data: data2,
            type: "line",
            symbol: "none",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100,
          }
        ]
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
    },
    // 曲线四 一次项二次项系数曲线
    draw_nihe(title_text, data, data1, data2) {
      let text = "";
      //头尾对调判断
      if (this.headTailFlag) {
        data1.reverse()
        data2.reverse()
        if (this.DSOSFlag) {
          data1 = data1.map(number => -number); // 两侧对调
          data2 = data2.map(number => -number); // 两侧对调
          text = title_text + '(头尾对调)(两侧对调)'
        }
        else{
          text = title_text + '(头尾对调)'
        }
      }
      else{
        if (this.DSOSFlag) {
          data1 = data1.map(number => -number); // 两侧对调
          data2 = data2.map(number => -number); // 两侧对调
          text = title_text + '(两侧对调)'
        }
        else{
          text = title_text
        }
      }
      var myChart = Echarts.init(
        document.getElementById("app_nihe"),
        "light"
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          // axisPointer: {
          //   // 坐标轴虚线
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },

        toolbox: {
          left: 'right', // 组件离容器左侧的距离
          top: 'top', // 组件离容器上侧的距离
          iconStyle: {
            borderColor: '#fff'
          },
          feature: {
            dataView: {
              show: true,
              lang: ['数据视图', '关闭', '导出Excel'],
              //optionToContent为重画表格的函数
              optionToContent: function (opt) {
                //axisData是你想定义的表格第一列的数据，我这里设置为柱形图的x轴数据
                var axisData = opt.xAxis[0].data
                //tAxis[0]为你想定义的表格第一行的数据
                var txisData = ["一次项系数","二次项系数"]
                var series = opt.series
                //表头
                var tdHeads = '<td  style="padding: 0 10px"></td>'
                var tdBodys = ''
                var nameData = txisData
                for (var i = 0; i < nameData.length; i++) {
                  tdHeads +=
                    '<td style="padding: 0 10px">' + nameData[i] + '</ td >'
                }
                var table =
                  '<table id="Mytable" border="1" class="table table-bordered table-striped table-hover" style="width:100%;text-align:center;color: #000;" ><tbody><tr>' +
                  tdHeads +
                  ' </tr>'
                for (var i = 0, l = axisData.length; i < l; i++) {
                  for (var j = 0; j < series.length; j++) {
                    if (series[j].data != undefined) {
                      var temp = series[j].data[i]
                      if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>'
                      } else {
                        tdBodys += '<td></td>'
                      }
                    }
                  }
                  table +=
                    '<tr><td style="padding: 0 10px">' +
                    axisData[i] +
                    '</td>' +
                    tdBodys +
                    '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table>'
                return table
              },
              //contentToOption为重写“刷新”按钮的语句
              contentToOption: function (HTMLDomElement, opt) {
                let et = XLSX.utils.table_to_book(
                  document.getElementById('Mytable')
                )
                let etout = XLSX.write(et, {
                  bookType: 'xlsx',
                  bookSST: true,
                  type: 'array'
                })
                try {
                  FileSaver.saveAs(
                    new Blob([etout], {
                      type: 'application/octet-stream'
                    }),
                    '一次项、二次项系数曲线数据.xlsx'
                  )
                } catch (e) { }
                return etout
              }
            },
            magicType: { show: false },
            restore: { show: false },
            saveAsImage: { show: false },
            // dataZoom: {show: true},
            myTool: {
              show: false, //是否显示
              title: '定义y轴', //鼠标悬空的提示文字
              icon:
                'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
              onclick: o => {
                this.sum = 1
                this.dialogVisible2 = true
                this.dialogTitle = '定义Y轴刻度范围'
              }
            }
          }
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          // name: "",
          type: "value",
          // max: '10',
          // min: '-10',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        legend: {
          right: "5%",
          top: "2%",
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        series: [
          {
            name: '一次项系数(黄色)值越大，DS侧非对称浪形越大',
            data: data1,
            type: 'line',
            smooth: true,
            color: "#FFFF00",
            symbol: 'none'
          },
          {
            name: '二次项系数',
            data: data2,
            type: "line",
            smooth: true,
            symbol: 'none'
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100,
          }
        ]
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
      //圈选结束后的回调
      // myChart.on("brushEnd", (params) => {
      //   // console.log(params)
      //   if (params.areas.length != 0) {
      //     // console.log(params.areas[0].coordRange)
      //     let start = params.areas[0].coordRange[0];
      //     let end = params.areas[0].coordRange[1];
      //     // console.log(option.xAxis.data)
      //     let startLength = option.xAxis.data[start];
      //     console.log("startLength:", startLength);
      //     let endLength = option.xAxis.data[end];
      //     console.log("endLength:", endLength);
      //     // console.log(data2) //开始截取该区间的Y值，计算最大最小值
      //     let selected_data = [];
      //     for (let index = start; index < end; index++) {
      //       selected_data.push(data2[index]);
      //     }
      //     // console.log(selected_data) //开始截取该区间的Y值，计算最大最小值
      //     let max = Math.max(...selected_data);
      //     let min = Math.min(...selected_data);
      //     let diff = parseFloat(max - min).toFixed(3);
      //     text =
      //       "最小值：" +
      //       min +
      //       "\xa0\xa0\xa0\xa0 最大值：" +
      //       max +
      //       "\xa0\xa0\xa0\xa0 波动量：" +
      //       diff;
      //     console.log(text);
      //     this.selected_s5_force_diff_text = text;
      //   }
      // });
    },
    // 曲线五
    draw_flatave(title_text, data, data1, data2) {
      let text = "";
      //头尾对调判断
      if (this.headTailFlag) {
        data1.reverse()
        data2.reverse()
        text = title_text + '(头尾对调)'
      }
      else{
        text = title_text
      }
      var myChart = Echarts.init(
        document.getElementById("app_flatave"),
        "light"
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          // axisPointer: {
          //   // 坐标轴虚线
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        toolbox: {
          left: 'right', // 组件离容器左侧的距离
          top: 'top', // 组件离容器上侧的距离
          iconStyle: {
            borderColor: '#fff'
          },
          feature: {
            dataView: {
              show: true,
              lang: ['数据视图', '关闭', '导出Excel'],
              //optionToContent为重画表格的函数
              optionToContent: function (opt) {
                //axisData是你想定义的表格第一列的数据，我这里设置为柱形图的x轴数据
                var axisData = opt.xAxis[0].data
                //tAxis[0]为你想定义的表格第一行的数据
                var txisData = ["板形正值均值[IU]","板形均值[IU]"]
                var series = opt.series
                //表头
                var tdHeads = '<td  style="padding: 0 10px"></td>'
                var tdBodys = ''
                var nameData = txisData
                for (var i = 0; i < nameData.length; i++) {
                  tdHeads +=
                    '<td style="padding: 0 10px">' + nameData[i] + '</ td >'
                }
                var table =
                  '<table id="Mytable" border="1" class="table table-bordered table-striped table-hover" style="width:100%;text-align:center;color: #000;" ><tbody><tr>' +
                  tdHeads +
                  ' </tr>'
                for (var i = 0, l = axisData.length; i < l; i++) {
                  for (var j = 0; j < series.length; j++) {
                    if (series[j].data != undefined) {
                      var temp = series[j].data[i]
                      if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>'
                      } else {
                        tdBodys += '<td></td>'
                      }
                    }
                  }
                  table +=
                    '<tr><td style="padding: 0 10px">' +
                    axisData[i] +
                    '</td>' +
                    tdBodys +
                    '</tr>'
                  tdBodys = ''
                }
                table += '</tbody></table>'
                return table
              },
              //contentToOption为重写“刷新”按钮的语句
              contentToOption: function (HTMLDomElement, opt) {
                let et = XLSX.utils.table_to_book(
                  document.getElementById('Mytable')
                )
                let etout = XLSX.write(et, {
                  bookType: 'xlsx',
                  bookSST: true,
                  type: 'array'
                })
                try {
                  FileSaver.saveAs(
                    new Blob([etout], {
                      type: 'application/octet-stream'
                    }),
                    '板形均值曲线数据.xlsx'
                  )
                } catch (e) { }
                return etout
              }
            },
            magicType: { show: false },
            restore: { show: false },
            saveAsImage: { show: false },
            // dataZoom: {show: true},
            myTool: {
              show: false, //是否显示
              title: '定义y轴', //鼠标悬空的提示文字
              icon:
                'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
              onclick: o => {
                this.sum = 1
                this.dialogVisible2 = true
                this.dialogTitle = '定义Y轴刻度范围'
              }
            }
          }
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "板形[IU]",
          type: "value",
          // max: '10',
          // min: '-10',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        legend: {
          right: "5%",
          top: "2%",
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        series: [
          {
            name: '板形正值均值',
            data: data1,
            type: 'line',
            smooth: true,
            color: "#FFFF00",
            symbolSize: 'none'
          },
          {
            name: '板形均值',
            data: data2,
            type: "line",
            smooth: true,
            symbolSize: 'none',
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100,
          }
        ]
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
      //圈选结束后的回调
      // myChart.on("brushEnd", (params) => {
      //   // console.log(params)
      //   if (params.areas.length != 0) {
      //     // console.log(params.areas[0].coordRange)
      //     let start = params.areas[0].coordRange[0];
      //     let end = params.areas[0].coordRange[1];
      //     // console.log(option.xAxis.data)
      //     let startLength = option.xAxis.data[start];
      //     console.log("startLength:", startLength);
      //     let endLength = option.xAxis.data[end];
      //     console.log("endLength:", endLength);
      //     // console.log(data2) //开始截取该区间的Y值，计算最大最小值
      //     let selected_data = [];
      //     for (let index = start; index < end; index++) {
      //       selected_data.push(data2[index]);
      //     }
      //     // console.log(selected_data) //开始截取该区间的Y值，计算最大最小值
      //     let max = Math.max(...selected_data);
      //     let min = Math.min(...selected_data);
      //     let diff = parseFloat(max - min).toFixed(3);
      //     text =
      //       "最小值：" +
      //       min +
      //       "\xa0\xa0\xa0\xa0 最大值：" +
      //       max +
      //       "\xa0\xa0\xa0\xa0 波动量：" +
      //       diff;
      //     console.log(text);
      //     this.selected_s5_force_diff_text = text;
      //   }
      // });
    },
    // 曲线六  38 39 40 三个通道的均值 和 19 20 21 三个通道的均值之间的差值
    draw_ribbed_wave(title_text, data, data1) {
      let text = "";
      //头尾对调判断
      if (this.headTailFlag) {
        data1.reverse()
        if (this.DSOSFlag) {
          data1 = data1.map(number => -number); // 两侧对调
          text = title_text + '(头尾对调)(两侧对调)'
        }
        else{
          text = title_text + '(头尾对调)'
        }
      }
      else{
        if (this.DSOSFlag) {
          data1 = data1.map(number => -number); // 两侧对调
          text = title_text + '(两侧对调)'
        }
        else{
          text = title_text
        }
      }
      var myChart = Echarts.init(
        document.getElementById("app_ribbed_wave"),
        "light"
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: text,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          // axisPointer: {
          //   // 坐标轴虚线
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        // brush: {
        //   toolbox: ["lineX", "clear"],
        //   xAxisIndex: 0,
        // },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#5470C6"],
        xAxis: {
          name: "长度[m]",
          type: "category",
          data: data,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        yAxis: {
          name: "[IU]",
          type: "value",
          // max: '15',
          // min: '-15',
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff", //改变坐标轴的颜色
            },
          },
        },
        legend: {
          left: "right",
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        series: [
          {
            name: '10~12与19~21通道板形均值差',
            data: data1,
            type: 'line',
            smooth: true,
            color: "#FFFF00",
            symbolSize: 'none',
            markLine: {
              symbol: 'none', //去掉警戒线最后面的箭头
              label: {
                position: 'end', //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: ''
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: 'dashed',
                    color: 'rgba(238, 99, 99)'
                  },
                  name: '警戒线',
                  yAxis: 8
                },
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: 'dashed',
                    color: 'rgba(238, 99, 99)'
                  },
                  name: '警戒线',
                  yAxis: -8
                }
              ]
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100,
          }
        ]
      };
      //清空画布，防止缓存
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();
    },
    // 3D板形图
    draw_3d(title_text, datas10) {
      // var need_x11 = [];
      // let keyNames = [];
      // let res = [];
      // for (var i = 0; i < datas10.length; i++) {
      //   need_x11.push(datas10[i].X);
      //   keyNames = Object.keys(datas10[0]);
      // }
      // keyNames.splice(keyNames.length - 3, 3);
      // keyNames = keyNames.sort((a, b) => a - b);
      // let resultData = {};
      // for (var j = 0; j < keyNames.length; j++) {
      //   resultData[keyNames[j]] = [];
      //   for (var k = 1; k < datas10.length; k++) {
      //     resultData[keyNames[j]].push(datas10[k][keyNames[j]] * 1);
      //   }
      // }
      // Object.entries(resultData).forEach(([key, value]) => {
      //   // const macthReq = /FLATNESS26_(\d+)$/.exec(key)
      //   if (value.every((i) => i === 0)) return;
      //   const index = key.substring(11, key.length) * 1;
      //   value.forEach((v, i) => {
      //     res.push([i + 1, index, v]);
      //   });
      // });
      // res = res.sort((a, b) => a[0] - b[0]);
      //以通道为列整理
      this.ecahrtsOption = []
      const optionName = []
      let name = ''
      for (i = 1; i < 31; i++) {
        if (i < 10) {
          name = 'SHAPE_FB_CH_' + i
        } else {
          name = 'SHAPE_FB_CH_' + i
        }
        optionName.push(name)
      }
      for (i in optionName) {
        const key = optionName[i]
        this.ecahrtsOption.push(datas10["FLATNESS_MAP"][key])
      }
      const res = []
      const xAxis = []
      const yAxis = []// Y轴通道号
      for (i = 0; i < this.ecahrtsOption[0].length; i++) {
        xAxis.push(i)
      }
      for (var i = 0; i < this.ecahrtsOption.length; i++) {
        yAxis.push(i) // Y轴通道号
      }

      var y1 = 0 // 有数的最小索引
      var y5 = 29 // 有数的最大索引
      for (var i = 1; i < this.ecahrtsOption.length/2; i++) {
        const minnum = Math.min.apply(null, this.ecahrtsOption[i])
        const maxnum = Math.max.apply(null, this.ecahrtsOption[i])
        var minnum2 = Math.min.apply(null, this.ecahrtsOption[i - 1])
        var maxnum2 = Math.max.apply(null, this.ecahrtsOption[i - 1])
        if (minnum2 === 0 && maxnum2 === 0 && (minnum !== 0 || maxnum !== 0)) {
          y1 = i;break;
        }
      }
      for (var i = this.ecahrtsOption.length-2; i > this.ecahrtsOption.length/2; i--) {
        const minnum = Math.min.apply(null, this.ecahrtsOption[i])
        const maxnum = Math.max.apply(null, this.ecahrtsOption[i])
        var minnum2 = Math.min.apply(null, this.ecahrtsOption[i - 1])
        var maxnum2 = Math.max.apply(null, this.ecahrtsOption[i - 1])
        if (minnum === 0 && maxnum === 0 && (minnum2 !== 0 || maxnum2 !== 0)) {
          y5 = i - 1;break;
        }
      }
      /* let min = 99999
      let max = 0*/
      this.ecahrtsOption.map((item, index) => {
        item.map((item2, index2) => {
          /* if (min > item2) {
            min = item2 / 20
          }
          if (max < item2) {
            max = item2 / 20
          }*/
          const num = item2
          if (index >= y1 && index <= y5) {
            res.push([index2, index, num])
          }
        })
      })

      var myChart = Echarts.init(document.getElementById("app3d"))
      var option = {
        title: {
          text: title_text,
          textStyle: {
            color: "#ccc",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 18,
          },
        },
        tooltip: {
          position: "top",
          trigger: "axis",
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: "line", //默认为line，line直线，cross十字准星，shadow阴影
            lineStyle: {
              color: "#ff0640",
              opacity: 1,
              width: 2,
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          containLabel: true,
        },
        xAxis3D: {
          // name: '米',
          triggerEvent: true,
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          nameTextStyle: {
            fontSize: 15,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          axisPointer: {
            // value: '1',
            handle: {
              show: true,
              size: 20,
              margin: 40,
              color: "#ff0640",
            },
          },
          data: xAxis,
        },
        yAxis3D: {
          // name: '通道',
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          nameTextStyle: {
            fontSize: 10,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          type: "category",
          data: yAxis,
        },
        zAxis3D: {
          max: 25,
          min: -25,
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          nameTextStyle: {
            fontSize: 10,
            padding: [0, 0, 0, -10],
            color: "#ffffff",
          },
          type: "value",
        },
        legend: {
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        visualMap: {
          min: -25,
          max: 25,
          calculable: true,
          orient: "vertical",
          left: "right",
          top: "top",
          realtime: false,
          textStyle: {
            color: "#ffffff",
          },
          inRange: {
            color: [
              "RGB(0,10,255)",
              "RGB(0,150,255)",
              "RGB(0,199,255)",
              "#11fff9",
              "RGB(0,255,0)",
              "#FFF500",
              "RGB(255,230,0)",
              "RGB(249, 102, 0)",
              "RGB(255,0,0)",
            ],
          },
        },
        grid3D: {
          boxWidth: 800,
          boxDepth: 200,
          viewControl: {
            beta: 12, //绕y轴旋转角度
            alpha: 50, //绕x轴旋转角度
            distance: 450, //远近距离
            minDistance: 50, //最小距离
            maxDistance: 1000, //最大距离
            zoomSensitivity : 3 //缩放灵敏度
          },
        },
        series: [
          {
            type: "surface",
            wireframe: {
              show: false
            },
            shading: 'color',
            animation: false, // 是否开启动画
            large: true, // 开启大数据量优化
            showSymbol: true, // 是否画点
            sampling: "average", //降采样策略
            data: res,
          },
        ],
      };
      //使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option, true)
      //清空画布，防止缓存
      myChart.clear();
      //使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
    },
    // 无数据时：展示暂无数据
    echarts_no(e) {
      const dom = document.getElementById(e);
      dom.innerHTML = "暂无数据";
      dom.style.cssText =
        "text-align:center; color: #999; border: none;line-height: 270px";
      dom.removeAttribute("_echarts_instance_");
    },
    //修改Y轴刻度
    btn () {
      this.dialogVisible2 = true
      this.dialogTitle = '定义Y轴刻度范围'
    },
    ok () {
      this.dialogVisible2 = false
      //this.draw_flatave( "" + row.PRODUCTID + " " + row.GRADE + " " + row.EXWIDTH + "*" + row.EXTHICK + " 板形均值", X, flatave_positive, flatave);
    },
    no () {
      this.dialogVisible2 = false
    },
     //导出
     DataExport() {
      // console.log(this.searchInfo.day_search)
      // console.log(moment(this.searchInfo.day_search).startOf('day').format('YYYY-MM-DD HH:mm:ss'))
      // console.log(moment(this.searchInfo.day_search).add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
      this.loadingPort = true
      let url = `http://10.32.42.32:8081/baosteel/tbPltcmAscResult/exportXlsx`
      let data = {

        condition: {
          dbegin:moment(this.searchInfo.day_search).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          dend:moment(this.searchInfo.day_search).add(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
          extid:this.searchInfo.entid
        }


      }
      derivecloud(data, url).then(res => {
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' }) //指定文件MIME
        let a = document.createElement('a')
        a.download = `酸轧生产实绩.xlsx` //指定下载的文件名
        a.href = URL.createObjectURL(blob) //  URL对象格式不匹配你能拿到你们后端给你返回的哪个文件名字嘛 我问他？
        a.click() // 模拟点击
        URL.revokeObjectURL(a.href) // 释放URL 对象
        if (res.size > 0) {
          this.loadingPort = false

        }
      })
    },

    exportToExcel() {
      const columnMap = {
        '连轧出口卷号': 'PRODUCTID',
        '钢种': 'GRADE',
        '宽度': 'EXWIDTH',
        '厚度': 'EXTHICK',
        '长度': 'EXLENGTH',
        '头部板形':'HEAD_JIFEN',
        '中部板形':'MID_JIFEN',
        '尾部板形':'TAIL_JIFEN',
        '浪形描述':'ASC_DESC',
        '跑偏风险':'PAOPIAN_RATE',
        '生产结束时间':'PRODTIME_T',
        '板形等级1占比':'CLASS_RATE1',
        '板形等级2占比':'CLASS_RATE2',
        '板形等级3占比':'CLASS_RATE3',
        '板形等级4占比':'CLASS_RATE4',
        '板形等级5占比':'CLASS_RATE5',
        '板形等级6占比':'CLASS_RATE6',
        '板形等级7占比':'CLASS_RATE7',
      };
      // 创建一个工作簿
      const workbook = XLSX.utils.book_new();

      // 将数据转换为工作表
      const worksheet = XLSX.utils.json_to_sheet(this.tableData, { header: Object.values(columnMap) });

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成 Excel 文件的二进制数据
      const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 使用 file-saver 保存 Excel 文件
      saveAs(new Blob([excelData], { type: 'application/octet-stream' }), '连轧生产实绩.xlsx');
    },
    /**
     * description: 重置按钮
     */
    resetForm () {
      this.condition = " ";
      this.searchInfo = {};
      this.test();
      this.$refs.tab2.clearSort()
      this.timer = setInterval(() => {
        this.resetForm();
      }, 60000);
    },
    ToBreak(val) {
      let reg = /[;；]/g
      if (val != null) {
        return val.replace(reg, '；<br/>')
      }
    },
    close() {
      this.series_data_line = [];
      this.series_data_name = [],
      this.process_date_line =
      {
        echartX1:[],
        F1FORCE:[],
        F1ENTENS:[],
        F1EXTENS:[],
        F1SPEED:[],
        F1REDRATE:[],
        F2FORCE:[],
        F2ENTENS:[],
        F2EXTENS:[],
        F2SPEED:[],
        F2REDRATE:[],
        F3FORCE:[],
        F3ENTENS:[],
        F3EXTENS:[],
        F3SPEED:[],
        F3REDRATE:[],
        F4FORCE:[],
        F4ENTENS:[],
        F4EXTENS:[],
        F4SPEED:[],
        F4REDRATE:[],
        F5FORCE:[],
        F5ENTENS:[],
        F5EXTENS:[],
        F5SPEED:[],
        F5REDRATE:[],
        F2DSFORCES:[],
        F1FSLIP:[],
        F2FSLIP:[],
        F3FSLIP:[],
        F4FSLIP:[],
        F5FSLIP:[],
        F1EXTHICK:[],
        F2EXTHICK:[],
        F3EXTHICK:[],
        F4EXTHICK:[],
        F5EXTHICK:[],
        F1DSFORCES:[],
        F1OSFORCES:[],
        F2OSFORCES:[],
        F3DSFORCES:[],
        F3OSFORCES:[],
        F4DSFORCES:[],
        F4OSFORCES:[],
        F5DSFORCES:[],
        F5OSFORCES:[],
        F1DSGAP:[],
        F1OSGAP:[],
        F2DSGAP:[],
        F2OSGAP:[],
        F3DSGAP:[],
        F3OSGAP:[],
        F4DSGAP:[],
        F4OSGAP:[],
        F5DSGAP:[],
        F5OSGAP:[],
        F1GLEVEL:[],
        F2GLEVEL:[],
        F3GLEVEL:[],
        F4GLEVEL:[],
        F5GLEVEL:[],
        F1WRBEND:[],
        F2WRBEND:[],
        F3WRBEND:[],
        F4WRBEND:[],
        F1IMRBEND:[],
        F2IMRBEND:[],
        F3IMRBEND:[],
        F4IMRBEND:[],
        F5IMRBEND:[],
        STRIMOSGAP:[],
        STRIMDSGAP:[],
        STRIMOSLAP:[],
        STRIMDSLAP:[],
        F5WRBEND:[],
        F5RTYPE:[],
        F1ENTHICK:[],
        F6TENDIFF:[],
        F1TENDIFF:[],
        F2TENDIFF:[],
        F3TENDIFF:[],
        F4TENDIFF:[],
        F5TENDIFF:[]
      }
      var myChart = Echarts.init(document.getElementById("app0"), 'light')
      myChart.clear()
      myChart.dispose()
      this.newDialogFormVisible = false;
      this.diglogShow = false;
    },
    close2d() {
      var myChart = Echarts.init(document.getElementById("app_2d"), 'light')
      myChart.clear()
      myChart.dispose()

      myChart = Echarts.init(document.getElementById("app_nihe"), 'light')
      myChart.clear()
      myChart.dispose()

      myChart = Echarts.init(document.getElementById("app_flatave"), 'light')
      myChart.clear()
      myChart.dispose()

      myChart = Echarts.init(document.getElementById("app_ribbed_wave"), 'light')
      myChart.clear()
      myChart.dispose()

      myChart = Echarts.init(document.getElementById("app_actual_tension"), 'light')
      myChart.clear()
      myChart.dispose()

      myChart = Echarts.init(document.getElementById("app_out_thickness_dev"), 'light')
      myChart.clear()
      myChart.dispose()

    },
    close3d() {
        var myChart = Echarts.init(document.getElementById("app3d"), 'light')
        myChart.clear()
        myChart.dispose()
      },
    close_pinjie() {
        var myChart = Echarts.init(document.getElementById("app_pinjie"), 'light')
        myChart.clear()
        myChart.dispose()
        this.tableDataDialog_pinjie = []
      },
    Flatness (scope) {
      if (scope.row.HEAD_JIFEN <= 1.5) {
        return 'ColorGreen'
      }
      if (scope.row.HEAD_JIFEN > 1.5 && scope.row.HEAD_JIFEN < 3) {
        return 'ColorBlue'
      }
      if (scope.row.HEAD_JIFEN >= 3 && scope.row.HEAD_JIFEN < 5) {
        return 'ColorYellow'
      }
      if (scope.row.HEAD_JIFEN > 5) {
        return 'ColorRed'
      }
    },
    Flatness_1 (scope) {
      if (scope.row.MID_JIFEN <= 1) {
        return 'ColorGreen'
      }
      if (scope.row.MID_JIFEN > 1 && scope.row.MID_JIFEN < 2) {
        return 'ColorBlue'
      }
      if (scope.row.MID_JIFEN >= 2 && scope.row.MID_JIFEN < 4) {
        return 'ColorYellow'
      }
      if (scope.row.MID_JIFEN > 4) {
        return 'ColorRed'
      }
    },
    Flatness_2 (scope) {
      if (scope.row.TAIL_JIFEN <= 1.5) {
        return 'ColorGreen'
      }
      if (scope.row.TAIL_JIFEN > 1.5 && scope.row.TAIL_JIFEN < 3) {
        return 'ColorBlue'
      }
      if (scope.row.TAIL_JIFEN >= 3 && scope.row.TAIL_JIFEN < 5) {
        return 'ColorYellow'
      }
      if (scope.row.TAIL_JIFEN > 5) {
        return 'ColorRed'
      }
    },
    Device_risk (scope) {
      if (scope.row.DEVICE_LENGTH_JIFEN_MAX <= 1) {
        return 'ColorGreen'
      }
      if (scope.row.DEVICE_LENGTH_JIFEN_MAX > 1 && scope.row.DEVICE_LENGTH_JIFEN_MAX < 2) {
        return 'ColorBlue'
      }
      if (scope.row.DEVICE_LENGTH_JIFEN_MAX >= 2 && scope.row.DEVICE_LENGTH_JIFEN_MAX < 4) {
        return 'ColorYellow'
      }
      if (scope.row.DEVICE_LENGTH_JIFEN_MAX > 4) {
        return 'ColorRed'
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tuduxiexing {
  // border: 5px solid #105b8d;
  display: flex;
}

.width {
  width: 200px;
}

.layout-search .el-form .el-form-item label {
  color: #eae8c5 !important;
  line-height: 55px;
  margin-top: -13px;
  height: 31px;
  margin-left: 40px;
}

.Transparent {
  /* color: red; */
  display: inline-flex;
}

.Transparent::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background-color: transparent;
}

.ColorRed {
  color: #ff5a56;
  display: inline-flex;
}

.ColorRed::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: #ff5a56;
}

.ColorBlue {
  /* color: blue; */
  display: inline-flex;
}

.ColorBlue::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: rgb(14, 104, 239);
}

.ColorYellow {
  /* color: yellow; */
  display: inline-flex;
}

.ColorYellow::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: yellow;
}

.ColorGreen {
  /* color: green; */
  display: inline-flex;
}

.ColorGreen::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: #10d15d;
}

.text_ban {
  display: flex;
  padding: 5px 0;
}

.text_tu {
  font-size: 20px;
  font-weight: 700;
  color: #215ffa;
  margin-right: 20px;
  cursor: pointer;
}

.lei {
  color: #fff !important;
  border-bottom: 4px solid #215ffa;
}

// .el-table >>> th >>> .cell {
//   height: auto !important;
// }
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.echartbuto {
  position: absolute;
  right: 80px;
  top: 5px;
  padding: 5px;
  z-index: 999;
}

/deep/ .el-table .warning-row td {
  background: #2557ba !important;
}

#data-view {
  width: 100%;
  height: 100%;
  background-color: #1f3293;
  color: #fff;
}

#dv-full-screen-container {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

.box-10 {
  width: 49%;
  margin: 5px;
  height: 300px;
  display: inline-block;
}

.dv-border-box-10 {
  width: 100%;
  // padding: 5px;
  float: left;
}

.dv-border-box-11 {
  width: 100%;
  height: auto;
  //padding: 1% 1% 1%;
  //margin: 1% 1% 1%;
  overflow: hidden;
}

.dv-border-box-12 {
  padding: 1%;
}

span {
  color: #fff;
}

.ipt {
  margin: 0 0 10px 4%;
  width: 80%;
}

::v-deep .el-table__body-wrapper {
  overflow-y: auto ;
  height: calc(100vh - 230px);
}

::v-deep .el-table th.gutter {
  display :table-cell !important
}
.el-tree{
  background: #1f3293;
  color: #ffffff;
}
::v-deep .el-tree-node__content:hover {
  background-color: #3265b1;
}
::v-deep .el-tree-node:focus>.el-tree-node__content {
  background-color: #3265b1;
}

::v-deep .el-table__body tr.current-row > td {
    background: #d0e2f7 !important;
}
</style>
